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

我目前正在做一个d3项目，遇到了一个问题

我的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");
})

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

有人能帮我吗(

编辑：

---

您可以将整个代码作为一个片段发布吗？这样更容易调试确切的问题。编辑代码并添加图表外观的图片：）您可以将整个代码作为一个片段发布吗？调试确切的问题会更容易。编辑代码并添加图表外观的图片：）