Hey there, Stackoverflow community!
I've been working on creating a sunburst chart using the resources provided at: http://bl.ocks.org/kerryrodden/7090426. I've successfully replicated the artwork from the example, but now I'm trying to add my own unique twist and facing some challenges. I believe the key lines of code that I need to focus on are:
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius * radius])
.value(function(d) { return d.size; });
I've experimented with different variations of the line:
.value(function(d) { return d.size; });
This includes attempting to modify the values of each parent node to a predefined value sent over in the JSON data. My goal is to have the chart reflect the structure of the JSON data like so:
{
"name": "root",
"children": [
{
"name": "a",
"size": 100,
"children": [
{
"name": "b",
"size": 50,
"children": [
{
"name": "c",
"size": 25
},
{
"name": "d",
"size": 15
},
{
"name": "e",
"size": 35,
"children" : [
{
"name": "f",
"size": 10
},
{
"name": "g",
"size": 5
}
]
}
]
}
]
}
]
}
In this JSON, each parent object contains the total sum of its children as well as its own value (designated as size). For example, the top parent (root) has a value of 100 because 'a' is also 100. However, when we look at 'b' which is 50 and 'e' which is 35, there's 15 missing from 'b' that is included in 'a''s size. I'm not entirely sure if what I want to achieve is feasible or requires a different approach. When you plug in the JSON above, the chart will render, but upon inspection, 'f' and 'g' represent 100% of 'e', whereas I want them to collectively represent only 42% since the remainder of 'e' should be accounted for by 'f' and 'g'. Thanks for taking the time to read through, and have an awesome day!