I'm using d3.js in a swt browser environment. Since d3.js wasn't my first choice to draw a treemap, my data is flat and looks like this:
var datatable = [
{name:'Global', parent: 'null', value: 0, color: 0},
{name:'America', parent:'Global', value: 0, color: 0},
{name:'Europe', parent:'Global', value: 0, color: 0},
{name:'Asia', parent:'Global', value: 0, color: 0},
{name:'Australia', parent:'Global', value: 0, color: 0},
{name:'France', parent:'Europe', value: 11, color: }
];
Some will recognize that this is a modified data table used in google charts to 'fill' a chart. In d3 I need to pass a hierarchical structure to my treemap function which leads me to the d3.nest function:
var root = d3.nest()
.key(function(d) { return d.name; })
.entries(datatable);
This is quite a step into the right direction and gives me something like this:
[
{
"key": "Global",
"values": [
{
"color": "0",
"name": "America",
"parent": "Global",
"value": "0",
},
{
"color": "0",
"name": "Europe",
"parent": "Global",
"value": "0",
},
]
},
{
"key": "Europe",
"values": [
{
"color": "0",
"name": "France",
"parent": "Europe",
"value": "11",
},
{
"color": "0",
"name": "Germany",
"parent": "Europe",
"value": "15",
},
]
}
]
But what I do want is something like this, to pass it to the treemap layout:
[
{
"key": "Global",
"values": [
{
"key": "Europe",
"values": [
{
"color": "0",
"name": "France",
"parent": "Europe",
"value": "11",
},
]
}
]
}
]
So any idea how solve that issue? I havn't found a way to invoke the nest().key function in such a way the the result is satisfying. I'm also looking for a way to create a hierarchical structure more dynamically for more than two layers. Any idea?
I would highly appreciate any hints and thank you in advance.