How to assign different colors to each node in a Sunburst?

Asked

Viewed 25 times

0

I am creating Sunburst that has a lot of data, to have a more readable reading I want to assign to each node a color. I am using the D3.js library, I found in the documentation the following code.

   letcolor = d3.scaleLinear()
    .domain([10, 100])
    .range(["brown", "steelblue"]);

Any value I put between 0-100 the function will return me a value in rgb according to the value, but I can not put this information in the graph, what I tried so far was the code below.

    // JSON data
    var nodeData = {
        "name": "TOPICS",
        "children": [{
            "name": "Topic A",
            "children": [{
                "name": "Sub A1",
                "size": 30
            }, {
                "name": "Sub A2",
                "size": 10
            }]
        }, {
            "name": "Topic B",
            "children": [{
                "name": "Sub B1",
                "size": 40
            }, {
                "name": "Sub B2",
                "size": 100
            }, {
                "name": "Sub B3",
                "size": 60
            }]
        }, {
            "name": "Topic C",
            "children": [{
                "name": "Sub A1",
                "size": 45
            }, {
                "name": "Sub A2",
                "size": 55
            }]
        }]
    };

    // Variables
    var width = 500;
    var height = 500;
    var radius = Math.min(width, height) / 2;
    var color = d3.scaleLinear()
        .domain([10, 100])
        .range(["brown", "steelblue"]);

    // Create primary <g> element
    var g = d3.select('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

    // Data strucure
    var partition = d3.partition()
        .size([2 * Math.PI, radius]);

    // Find data root
    var root = d3.hierarchy(nodeData)
        .sum(function(d) {
            return d.size
        });

    // Size arcs
    partition(root);
    var arc = d3.arc()
        .startAngle(function(d) {
            return d.x0;
        })
        .endAngle(function(d) {
            return d.x1;
        })
        .innerRadius(function(d) {
            return d.y0;
        })
        .outerRadius(function(d) {
            return d.y1;
        });

    var arcs = g.selectAll('g')
        .data(root.descendants())
        .enter()
        .append('g')
        .attr("class", "node")
        .append('path')
        .attr("display", function(d) {
            return d.depth ? null : "none";
        })
        .attr("d", arc)
        .style('stroke', '#fff')


    // Put it all together
    g.selectAll('path')
        .data(root.descendants())
        .enter().append('path')
        .attr("display", function(d) {
            return d.depth ? null : "none";
        })
        .attr("d", arc)
        .style('stroke', '#fff')
        .style("fill", function(d) {
            return color((d.children ? d : d.parent).data.name);
        });
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.