svg - 如何在 d3 中为圆环图中的特定弧线添加自定义颜色？

Question

我正在尝试构建一个甜甜圈图。如何添加特定于弧的不同颜色。例如，我想要状态“一”的红色，状态“二”的蓝色，状态“三”的绿色等等......

我尝试了以下，

var color = d3.scale.ordinal()
 .domain(["one","two","three","four","five"])
 .range(["#013ADF", "#ACFA58", "#DF3A01", "#6b486b", "#a05d56"]);


paths.enter().append("svg:path")
        .attr("stroke", "white")
        .attr("stroke-width", 0.5)
        .attr("fill", function(d, i) {console.log(color(d.name)); return color(d.name); })

我最初能够得到颜色。但是当任何状态计数减少到 0 时，颜色就会被打乱。当我再次增加状态计数时，我无法恢复特定的颜色......

请帮忙提些建议....

Answer 1

您最好每次都更新颜色，而不仅仅是在 enter() 中。

paths.enter().append("svg:path")
    .attr("stroke", "white")
    .attr("stroke-width", 0.5)

path.attr("fill", function(d, i) {console.log(color(d.name)); return color(d.name); })