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