从json为d3js sunburst图表设置特定颜色

时间:2017-10-15 15:07:55

标签: d3.js

我正在尝试在d3js中创建一个sunburst图表,并希望每个项目/节点都具有从保存层次结构的json文件读取的特定颜色。看过d3js社区中的很多例子,但从未找到明确的答案。谢谢!

这是我的json(flare2.json)文件:

{
    "name": "Root","color": "#c0e2f1",
    "children": [
      {
        "name": "T1","color": "#a3a3a3",
        "children": [
            {"name": "S1", "size": 3938, "color": "#a9a9a9"},
            {"name": "D1","size": 3238, "color": "#ef69b4"}
        ]
      },
      {
        "name": "T2", "color": "#c0e2f1"
      }
    ]
}

以下是调用json的javascript代码段:

d3.json("flare2.json", function(error, root) {
    var g = svg.selectAll("g")
        .data(partition.nodes(root))
        .enter().append("g");

    var color = d3.scale.ordinal();

    var path = g.append("path")
        .attr("d", arc)
        //.style("fill", function(d) { return colors((d.children ? d :     d.parent).name); })
        .style("fill", function(d) { return color(d.color); })
        .on("click", click);
}

1 个答案:

答案 0 :(得分:1)

我认为你可能太难了。以下一行

.style("fill", function(d) { return color(d.color); })

似乎它不需要使用color函数,而只是返回对象的颜色属性,如下所示:

.style("fill", function(d) { return d.color; })