从 json 数据在 d3js 中绘制一个甜甜圈答案

【问题标题】：draw a donut in d3js from json data从 json 数据在 d3js 中绘制一个甜甜圈
【发布时间】：2018-03-05 15:33:45
【问题描述】：

我正在尝试使用 d3js 从secondOrderList 数据中绘制一个甜甜圈。但我收到一个错误：未捕获的类型错误：无法读取未定义的属性“长度” 在 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>
        );
    }
}

【问题讨论】：

据我所知，您有一个名为 secondOrderList 的数组，但您的 pies 变量看起来像 var pies = pie().value(d => {Math.abs(d.secondOrderImpact)});。什么是 secondOrderImpact？意思是，您使用饼图作为数据，但我没有看到您实际上已将数组中的值放入数据中。
@mutantkeyboard secondOrderList 是一个字典数组，它的元素是secondOrderImpact。我正在尝试根据此元素的值 (secondOrderImpact ) 绘制甜甜圈。我认为pie().value(d => {Math.abs(d.secondOrderImpact)}); 可以解决问题，d 将是secondOrderList 的每个数组元素，它将获得该元素的secondOrderImpact 。对吗？
啊哈。对不起。我还没有看到字典的最后一个值。

标签： reactjs d3.js

【解决方案1】：

我解决了这个问题！ javascript语法存在一个问题： var pies = pie().value(d => 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")

【讨论】：