带有d3.v3.js

时间:2016-12-07 13:40:17

标签: javascript json d3.js

我无法获得此json的树形图,因为深度,面积,x,y都设置为零。 代码如下,

    var entries= [ 
        { "name":"gg", "class":"A", "value":90 }, 
        { "name":"hh", "class":"B", "value":70 }, 
        { "name":"ii", "class":"A", "value":50 }, 
        { "name":"jj", "class":"C", "value":74 }, 
        { "name":"kk", "class":"B", "value":40 } ]

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

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

    var canvas=d3.select("#chartdisplay").append("svg")
                   .attr("width",200)
                   .attr("height",200);
     var root={};
   root.key="data";
   root.value=200;
   root.children=nest;
    var treemap=d3.layout.treemap()
                      .size([200,200])
                      .nodes(root);

    console.log("treemap"+treemap); //gives treemap[object Object][object Object],[object Object]

    var cells=canvas.selectAll(".cell")
                     .data(treemap)
                     .enter()
                     .append("g")
                     .attr("class","cell")

    cells.append("rect")
                .attr("x",function(d){
                    return d.x; })
                .attr("y",function(d){return d.y; })
                .attr("width",function(d){return d.dx;})
                .attr("height",function(d){return d.dy;})

我必须嵌套json才能获得层次结构,并且提供给树图的root值低于

 {"key":"data","value":200,"children":[{"key":"A","values":[{"name":"gg","class":"A","value":90},{"name":"ii","class":"A","value":50}]},{"key":"B","values":[{"name":"hh","class":"B","value":70},{"name":"kk","class":"B","value":40}]},{"key":"C","values":[{"name":"jj","class":"C","value":74}]}]}

每个对象的结果是, 宾语 面积:0 深度:0 DX:0 邓亚萍:0 长度:3 值:0 X:0 Y:0 我以后不能继续。请帮忙。

0 个答案:

没有答案