D3.js Treemap - 平面数据输入,它转换为分层数据

时间:2013-11-13 17:17:56

标签: javascript d3.js treemap

我在swt浏览器环境中使用d3.js。由于d3.js不是我绘制树形图的第一选择,因此我的数据是平坦的,如下所示:

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:  }
];

有些人会认识到这是谷歌图表中用于“填充”图表的修改数据表。 在d3中,我需要将层次结构传递给我的树形图函数,该函数将我引导到d3.nest函数:

var root =  d3.nest()
.key(function(d) { return d.name; })
.entries(datatable);

这是向正确的方向迈出的一步,给我这样的东西:

[
           {
           "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",
                 },      
         ]
    }
    ]

但是我想要的是将它传递给树形图布局:

[
           {
              "key": "Global",
              "values": [
                 {
                    "key": "Europe",
                    "values": [
                     {
                         "color": "0",
                         "name": "France",
                         "parent": "Europe",
                         "value": "11",
                     },
           ]
        }
       ]
   }
   ]

那么任何想法如何解决这个问题?我没有找到一种方法来调用nest()。key函数,结果令人满意。我也在寻找一种方法来为两个以上的层更动态地创建层次结构。有什么想法吗?

我非常感谢任何提示,并提前感谢你。

0 个答案:

没有答案