Question

我正在尝试使用d3js从secondOrderList数据中绘制甜甜圈。但我收到一个错误：未捕获的TypeError：无法读取未定义的属性“长度” 在SVGGElement.pie（pie.js：16）我做错了什么？

export default class SecondOrder extends Component {
componentDidUpdate(){
    var width = 1000;
    var height = 500;
    var fullAngle = 2 * Math.PI;
    var radius = Math.min(width, height) / 2 - 10;

    var svgContainer = select(".container")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid");

    var secondOrderList = [0:{name: "1.5", firstOrderWeight: 1, secondOrderWeight: 26, secondOrderTargets: Array(21), secondOrderImpact: 14}
                           1:{name: "2.4", firstOrderWeight: 1, secondOrderWeight: 23, secondOrderTargets: Array(14), secondOrderImpact: 12.5}
                           2:{name: "6.5", firstOrderWeight: 2, secondOrderWeight: 22, secondOrderTargets: Array(17), secondOrderImpact: 24}
                           3:{name: "7.2", firstOrderWeight: -1, secondOrderWeight: 12, secondOrderTargets: Array(18), secondOrderImpact: -7}
                           4:{name: "13.1", firstOrderWeight: 2, secondOrderWeight: 28, secondOrderTargets: Array(22), secondOrderImpact: 30}
                           5:{name: "15.2", firstOrderWeight: 2, secondOrderWeight: 12, secondOrderTargets: Array(10), secondOrderImpact: 14}
                           6:{name: "15.5", firstOrderWeight: 2, secondOrderWeight: 16, secondOrderTargets: Array(10), secondOrderImpact: 18}]


    var group = svgContainer.append("g")
        .attr("transform", "translate(" + 200 + "," + 250 + ")")

    var one_arc = arc()
        .outerRadius(100)
        .innerRadius(50);

    var pies = pie().value(d => {Math.abs(d.secondOrderImpact)});

    group.selectAll(".seconOrderDonut")
        .data(pies)
        .enter()
            .append('g')
        .classed("seconOrderDonut", true)

    group.append("path")
            .attr("d", one_arc)

}

render() {
    return (
        <div>
            <div className="donut" ref={(donut) => { this.donut = donut; }} />
        </div>
        );
    }
}

Answer 1

我解决了这个问题！这里有一个问题是javascript语法： var pies = pie（）。value（d =＆gt; Math.abs（d.secondOrderImpact））;

我使用{}作为函数并且没有返回任何值（当使用花括号时，你需要使用return关键字！）

另一个问题是我不应该单独使用append("path")，这是正确的方法：

group.selectAll(".seconOrderDonut")
    .data(pies)
    .enter()
        .append('g')
    .classed("seconOrderDonut", true)
    .append("path")
        .attr("d", one_arc)
        .style("fill", "red")

从json数据中绘制d3js中的甜甜圈

1 个答案: