React-vis: ReferenceError: d3 is not defined

[Tom-Gorup]

Attempting to render the "showcase" radar chart from here and I receive the below error. I'm unsure what I would be missing here.

Let me know if you need more information.

ReferenceError: d3 is not defined
(anonymous function)
node_modules/radar-chart/src/radar-chart.js:33
  30 | //
  31 | arc : 2 * Math.PI,                                               //圓弧
  32 | areaShow : true,                                             //是否顯示一個項目的區塊
> 33 | color : d3.scale.category10(),
  34 | horizontalDashEnable : true  ,                                   //是否呈現虛線
  35 | verticalDashEnable : true,
  36 | itemTitleGap : 6,                                                //縱軸上的標題間隔

My package.json contains d3:

  "dependencies": {
    "d3": "^5.5.0",
    "d3-array": "^1.0.0",
    "d3-color": "^1.0.0",
    "d3-drag": "^1.0.0",
    "d3-geo": "^1.0.0",
    "d3-hexbin": "^0.2.0",
    "d3-interpolate": "^1.0.1",
    "d3-polygon": "^1.0.0",
    "d3-random": "^1.0.0",
    "d3-scale": "^1.0.0",
    "d3-tile": "0.0.3",
    "d3-time": "^1.0.0",
    "d3-voronoi": "^1.0.0",
    ...
  }

[mcnuttandrew]

It looks like this is an error from outside of react-vis. Our top level node_modules name is react-vis, and it appears that package giving you problems is called radar-chart.

Also tip: if you install each of the d3 sublibaries, you don't need to install the top level d3 package (or vice versa).

[Tom-Gorup]

I understand that it's not a react-vis, but it is used by the example in the showcase here. Is there someplace else that has a good example of the Radar Chart that I can use? I'm fairly new to React (as in the last couple weeks).

Appreciate the assist.

[mcnuttandrew]

Oh! Gotcha.

The radar-chart that is used in the showcase makes use of the fact that it is in the same file structure as the rest of react-vis. Instead you always want to invoke the top level package, like so:

import React, {Component} from 'react';
import {format} from 'd3-format';

import {RadarChart} from 'react-vis';

const DATA = [
  {name: 'Mercedes', mileage: 7, price: 10, safety: 8, performance: 9, interior: 7, warranty: 7},
  {name: 'Honda', mileage: 8, price: 6, safety: 9, performance: 6, interior: 3, warranty: 9},
  {name: 'Chevrolet', mileage: 5, price: 4, safety: 6, performance: 4, interior: 5, warranty: 6}
];

const basicFormat = format('.2r');
const wideFormat = format('.3r');

export default class BasicRadarChart extends Component {
  render() {
    return (
      <RadarChart
        data={DATA}
        tickFormat={t => wideFormat(t)}
        startingAngle={0}
        domains={[
          {name: 'mileage', domain: [0, 10]},
          {name: 'price', domain: [2, 16], tickFormat: t => `$${basicFormat(t)}`, getValue: d => d.price},
          {name: 'safety', domain: [5, 10], getValue: d => d.safety},
          {name: 'performance', domain: [0, 10], getValue: d => d.performance},
          {name: 'interior', domain: [0, 7], getValue: d => d.interior},
          {name: 'warranty', domain: [10, 2], getValue: d => d.warranty}
        ]}
        width={400}
        height={300} />
    );
  }
}