Question

我试图一起使用React和Rails来显示D3 4.0的动态驱动数据。当前示例基于教程here

我收到一个错误：

XML标记有空体

在弧渲染中

。

render() {
    return (
        <path d={this.arc(this.props.data)}
              style={{fill: this.props.color}}></path>
    );
}

我不知道如何调试它。

这是我的piechart.jsx代码：

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

    this.pie = d3.pie().value((d) => d.value);
    this.colors = d3.scaleOrdinal(d3.schemeCategory10);

}

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

}

render() {


    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))}
            {console.log('Rendered the graph')}
        </g>


    );

    }
}

我用它来称呼它：

<PieChart
            x={100}
            y={100}
            outerRadius={100}
            innerRadius={50}
            data={[{value: this.credits(), label: 'Credits'},
                {value: this.debits(), label: 'Debits'}]}
        />

我很好奇是否有人可以帮我解决这个问题。非常感谢和业力：）

D3 + react-rails Piechart没有显示

0 个答案: