Question

我正在尝试根据此resource创建一个d3饼图。

但是，我收到以下错误：

未捕获类型错误 - 无法读取属性＆＃39; pie＆＃39;未定义的

我的代码：

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＆＃39;。

有人能指出我正确的方向吗，也许你有更好的资源在轨道中添加d3 +反应功能？

Answer 1

在许多类似的问题中看到之前，这归结为D3 v4的新模块化，这使得flatten namespaces有必要：

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

对于您的代码，这意味着某些引用无效，因为它们引用了v4中不再可用的属性。您包含的代码段包含两种此类情况：

Shapes


d3.layout.pie↦d3.pie

并在代码的下一行

Scales


d3.scale.category10↦d3.schemeCategory10

D3饼图：未捕获的类型错误 - 无法读取属性＆＃39; pie＆＃39;未定义的

1 个答案:

Shapes

Scales