javascript - 将数据正确绑定到 d3 中的饼图

Question

我目前正在做一个 d3-Project 并遇到了问题。

我的 CSV 文件包含如下数据：

region, number_of_red_cars, number_of_green_cars, number_of_blue_cars, cars_total
A,5,10,5,20

我现在想创建一个饼图，显示不同颜色汽车的份额，但我不知道我必须将哪些数据绑定到饼图。

d3.csv("details.csv",function(data){



    var filtered = data.filter(function(d) {
    if (d.region== "A")
        return d;

    })



    var g= svg.select("body")
        .data(pie(filtered))
        .enter().append("g")
        .attr("class","arc");


    g.append("path")
        .attr("d",arc)
        .style("fill",function(d){return color (d.data.cars_total)});


    g.append("text")
        .attr("transform", function(d){return "translate(" + labelArc.centroid(d)+")";})
        .attr("dy", "35.em")
        .text(function(d){return d.data.cars_total;})
        .style("fill","white");
})

这不会给我预期的结果，因为我想要一个饼图来显示每种颜色在汽车总数中的确切份额。

谁能帮我吗？:(

编辑： 饼图应该是这样的

标签： javascriptd3.js