D3.js:将不同数量的元素添加到组中?

时间:2013-06-24 18:16:08

标签: d3.js

我正在尝试创建图表表示,但我不确定如何整理数据。

我目前将所有数据绑定到一个组并绘制了节点。

数据包括边缘列表,但我不知道如何绘制它们,因为每个节点都有不同的边数。

var group = svg.selectAll("g").data(dataset).enter().append("g);

//this works

group.append("circle")
     .attr(...).attr(...).attr(...);

//what to do here? when I call group, it will loop through each node ONCE and append a path
//but I need it to append edges.length paths for each pass

group.append("path")
     .attr("d", function(d,i){

        //example of 1 line
        lineSeg = [];
        lineSeg.push({"x":d.x ,"y":d.y});
        lineSeg.push({"x":d.edges[1].x ,"y":d.edges[1].y});

        return line(lineSeg);

     });

编辑:

//just to add dom structure, my goal is for it to be:

g:
   circle
   path1
   path2

g:
   circle
   path1
   path2
   path3

g:
   circle
   path1

etc...

Lars链接到相关的教程页面。对我来说,关键是嵌套数据连接

var td = d3.selectAll("tbody tr")
.data(matrix)
.selectAll("td")
.data(function(d, i) { return d; }); // d is matrix[i]

0 个答案:

没有答案