树形图渲染

时间:2016-12-11 16:17:40

标签: javascript d3.js

我正在尝试使用JSON渲染树形图

[
    {
    "month":"January",
    "north":200,
    "east":150,
    "west":300,
     "south":200
   },
   {
    "month":"February",
    "north":200,
    "east":800,
    "west":300,
     "south":1000
   },
   {
    "month":"March",
    "north":250,
    "east":200,
    "west":400,
     "south":600
   },
   {
    "month":"April",
    "north":690,
    "east":430,
    "west":350,
     "south":1500
   }]

我尝试使用此代码嵌套treemap来渲染树形图

var nested_data = d3.nest()
    .key(function(d) { return d.month; })
    .entries(entries);

console.log(JSON.stringify(nested_data));

var root = {};

// Add the data to the tree
root.key = "Data";
root.values = nested_data;

var treemap=d3.layout.treemap()
    .size([900,900])
    .children(function(d) { 
        //console.log(JSON.stringify(d));
        console.log("child",d.values);
        return d.values
    }) 
    .value(function(d) { 
        return direction.map(function (c) {
            console.log(d.month+d[c]);
            return {x: d.month, y: d[c]};
        })
        .nodes(root)
    })

我的问题是,在加载时,我得到控制台日志

enter image description here

虽然正确记录了x和y值,但我发现没有为x,y,dx,dy赋值。而且我不明白为什么孩子被记录三次,一个是整个阵列,一个是单一的,另一个是未定义的。请纠正。

0 个答案:

没有答案