Question

我必须用d3js绘制图形。为了表示图形，我使用相邻的列表数据结构。相邻列表中的每个项目都是边缘的目标顶点（源顶点是顶点本身）。

根据这种表示，我的数据是：

data = [
        { id: 1, pos: [10, 50], adj: [
                       {id: 2, pos: [30, 60]},
                       {id: 3, pos: [20, 30]}
                               ]
        },
        { id: 2, pos: [30, 60], adj: [{id: 1, pos: [10, 50]}]},
        { id: 3, pos: [20, 30], adj: [{id: 1, pos: [10, 50]}]}
       ]

如何绘制此图表？

我尝试了这个，但它不起作用

    var vertex = svg.selectAll("g").data(graph.vertices, function (d) { 
        return d.id; });

    // NEW
    vertex.enter().append("g")
    .attr("class", function(d) { return d.id });

    var edges = vertex.selectAll("line")
    .data(function(d) { return d.adj }, function(d,i) { 
        console.log(d); return d; });

    // UPDATE
    edges.classed("selected", function(d) { return d === selected; })
    .attr("x0", function(d) { 
        return d.pos[0]; })
    .attr("y1", function(d) { return d.pos[1]; })
    .attr("x1", function(d,i) { 
        return d.adj[i][0]; })
    .attr("y1", function(d,i) { return d.adj[i][1]; });

    // NEW
    edges.enter().append("line")
    .filter(function(d,i) { 
        return d.id < d.adj[i].id })
    .attr("class", "line")
    .attr("x0", function(d) { return d.pos[0]; })
    .attr("y0", function(d) { return d.pos[1]; })
    .attr("x1", function(d,i) { return d.adj[i].pos[0]; })
    .attr("y1", function(d,i) { return d.adj[i].pos[1]; });

    // OLD
    vertex.exit().remove();

P.S：我不能使用力布局。

Answer 1

您可以使用nested selections执行此操作。对于节点，您甚至不需要：

var vertex = svg.selectAll("circle").data(data, function (d) { return d.id; });

vertex.enter().append("circle")
  .attr("class", function(d) { return d.id })
  .attr("r", 5)
  .style("fill", "black")
  .attr("cx", function(d) { return d.pos[0]; })
  .attr("cy", function(d) { return d.pos[1]; });

然后添加嵌套选择的链接：

svg.selectAll("g.lines").data(data)
  .enter().append("g")
  .selectAll("line")
  .data(function(d) { return d.adj; })
  .enter().append("line")
  .attr("x1", function(d, i, j) { return data[j].pos[0]; })
  .attr("y1", function(d, i, j) { return data[j].pos[1]; })
  .attr("x2", function(d, i, j) { return d.pos[0]; })
  .attr("y2", function(d, i, j) { return d.pos[1]; });

完整示例here。

d3js和嵌套迭代的问题

1 个答案: