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)に、現在のデータのインデックスの場所を使用できます。より高いレベルの要素。difunction(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 に答える