1

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.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
rre030
  • 33
  • 1
  • 6

0 Answers0