D3饼图:未捕获的类型错误 - 无法读取未定义的属性"饼"

Question

我正在尝试根据此资源创建一个d3饼图.

但是,我收到以下错误:

未捕获的类型错误 - 无法读取未定义的属性"饼"

我的代码:

class PieChart extends React.Component {
constructor() {
    super();

// - This is where the error is occuring!

    this.pie = d3.layout.pie().value((d) => d.value);
    this.colors = d3.scale.category10();

}

arcGenerator(d, i) {
    return (
        <LabeledArc key = {`arc-${i}`}
                    data = {d}
                    innerRadius = {this.props.innerRadius}
                    outerRadius = { this.props.outerRadius }
                    color = {this.colors(i)} />
    );

}

render() {

    console.log('Render Method Fires');
    let pie = this.pie(this.props.data),
        translate = `translate(${this.props.x}, ${this.props.y})`;

    return (
             <g transform={translate}>
                {pie.map((d, i) => this.arcGenerator(d, i))}

            </g>
        );

    }
}

我想我已经正确设置了一切.我使用react-rails gem以及d3-rails.我不得不下载d3.js并将其直接放在我的js文件夹中以摆脱'找不到d3'.

任何人都可以指出我正确的方向,也许你有更好的资源在轨道中添加d3 +反应功能？

Answer 1

就像在许多类似的问题中看到的那样,这归结为D3 v4的新模块化,这使得必须扁平命名空间:

但是,采用ES6模块有一个不可避免的后果:D3 4.0中的每个符号现在共享一个平面命名空间而不是D3 3.x中的嵌套命名空间.

对于您的代码,这意味着某些引用无效,因为它们引用了v4中不再可用的属性.您包含的代码段包含以下两种情况:

形状

• d3.layout.pie↦ d3.pie

并在您的代码的下一行

秤

• d3.scale.category10↦ d3.schemeCategory10