0

困扰这个问题好几天了，希望有人能帮帮我，谢谢

我想做的就是这个

我有一堆根据它相关的节点分组的链接

svg是这样的

<g class = "edge" >
<path d="M 10,20L 176.04599778748948,300.5015249766384" ></path>
<path  d="M 30,40L 176.04599778748948,300.5015249766384" ></path>
</g>
<g class = "edge" >
<path d="M 50,60L 176.04599778748948,300.5015249766384" ></path>
<path d="M 70,80L 176.04599778748948,300.5015249766384" ></path>
</g>

数据集就像

  var nodes = [
    [" start", null, 0, [
        ["home", 1711, 1]
    ]],
    ["home", null, 4.279281698E9, [
        [" stop", 1173, 1]
    ]],
    [" stop", null, 0, []]
];

   var layout = [
    [100, 200,10],
    [300, 300,50],
    [50, 50,10]
];

我尝试初始化边缘：

var svg_edges = svg.append("g").attr("class", STYLE.edges)
      .selectAll("g")
      .data(nodes,function(d){ return d[0];}).enter().append("g").selectAll("path")
      .data(function(d) { return d[3]; },function(d){return d[0]})
      svg_edges.enter().append("path")
    drawEdge(svg_edges,false);
        /* Exit. */
    svg_edges.exit().remove();

然后我想对这些边缘组进行更新，例如

 function update (){
edges = svg.select("g." + STYLE.edges).selectAll("g").data(nodes,function(d){ return d[0];}) 
       edges = edges.selectAll("path").data(function(d){ return d[3]},function(d){return d[0]})
       edges.enter().append("path")
       drawEdge(edges,true)

       edges.exit().remove();
}

而且更新不起作用，它只添加或删除了一半的链接，以前有人这样做过吗，尝试更新嵌套选择，谢谢~~

=============================== 最后，我找到了解决方案，这就是我所做的

 /* Update the edges. */
       group = svg.select("g." + STYLE.edges).selectAll("g").data(nodes,function(d){ return d[0];});
       edges1=group.enter().append("g").selectAll("path").data(function(d){return d[3]})
       edges2=group.selectAll("path").data(function(d){return d[3]})
       edges1.enter().append("path")
       edges2.enter().append("path")
       drawEdge(edges1,true)
       drawEdge(edges2,true)
       edges1.exit().remove();
       edges2.exit().remove();
       group.exit().remove();
4

1 回答 1

0

您可以访问更高级别数据的索引作为函数的附加参数来设置属性等。也就是说，您可以使用function(d, i)where是当前数据的索引而不是d当前数据元素和当前索引更高层次的元素。ifunction(d, i, j)j

然后，您可以使用此索引来检索相关的更高级别的数据。代码看起来像这样：

svg_edges.enter().append("path")
         .attr("id", function(d, i, j) { return "g-" + j + "-path-" + i; });

完整的例子在这里。

于 2013-08-26T10:57:57.313 回答