CODEWITHSUNDEEP
d3.js
R Kavasseri
R Kavasseri

Reputation: 1

set specific colors from json for d3js sunburst charts

I am trying to create a sunburst chart in d3js and would like each item/node to be of a specific color that is read off the json file that holds the hierarchy. Have looked at many examples in the d3js community but never found a clear answer. Thanks!

Here is my json (flare2.json) file:

{
    "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"
      }
    ]
}

Here is the javascript snippet that calls the json:

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);
}

Upvotes: 0

Views: 2047

Answers (1)

Nick
Nick

Reputation: 16576

I think you're possibly making this too hard. The following line

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

Seems like it doesn't need to use a color function, but rather just return the object's color property, like so:

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

Upvotes: 2

Related Questions