21

フォース レイアウトの例 ( http://bl.locks.org/1153292 ) の 1 つを使用して、Web サイトにネットワークを表示しています。

ユーザーがいつでも表示するリンクの種類を選択できるようにします。リンク タイプ A を表示することを選択し、リンク タイプ B を追加してからリンク タイプ A を削除すると、タイプ B の残りのリンクが A 色で表示されることに気付きました。

これは、SVG ダイアグラムにリンクを追加するために実行されるコードです。this.linksリンクを追加および削除して配列を変更しています。ご覧のとおり、クラス属性を設定しましたが、更新されていません。リンク A のタイプのままです。

var path = svg.append("svg:g")
    .selectAll("path")
    .data(this.links)
   .enter()
    .append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

私は現在、 tick 関数内の class 属性を更新することでこの問題を回避していますが、もちろんこれは多くの不要な作業を引き起こします。

enter操作は、既存の要素と新しい要素のマージされた選択を返すため、attr操作は既存の要素を更新して新しい要素を設定する必要があることを読みました。

私は何が欠けていますか？

4

2 に答える 2

19

この投稿で答えを見つけました

var circle = svg.selectAll("circle")
    .data(data);

circle.enter().append("circle")
    .attr("r", 2.5);

circle
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

circle.exit().remove();

答えは、append 演算子の結果ではなく、selectAll.data の結果に対して attr 演算子を呼び出す必要があるということです。

于 2012-10-23T21:26:50.863 に答える
4

http://bl.ocks.org/1095795に、強制指向レイアウトからノードを追加および削除する例があります。リンクとノードを個別に処理する必要があり、その後、強制レイアウトを再起動する必要があります。

function restart() {
  var link = vis.selectAll("line.link")
      .data(links, function(d) { return d.source.id + "-" + d.target.id; });

  link.enter().insert("svg:line", "g.node")
      .attr("class", "link");

  link.exit().remove();

  var node = vis.selectAll("g.node")
      .data(nodes, function(d) { return d.id;});

  var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .call(force.drag);

  nodeEnter.append("svg:image")
      .attr("class", "circle")
      .attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
      .attr("x", "-8px")
      .attr("y", "-8px")
      .attr("width", "16px")
      .attr("height", "16px");

  nodeEnter.append("svg:text")
      .attr("class", "nodetext")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.id });

  node.exit().remove();

  force.start();
}
于 2012-10-20T21:15:50.087 に答える