4

ノードのグループを含む d3 強制指向グラフがあります。

var node = vis.selectAll("g.node")
              .data(json.nodes)
              .enter().append("svg:g")
              .attr("class", "node")
              .attr("id", function(d) { return "node" + d.index; })
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
              .call(force.drag);

これはうまくレンダリングされます。

dividで詳細を表示するときに、これらのノードを 200 ピクセル右に移動 (移動) したいと思いますdetail_container。

次のことを試しましたが、表示してもノードに何も起こりませんdetail_container(詳細を表示する以外div):

$('#detail_container').fadeIn('slow', function() {
    d3.selectAll("g.node").attr("transform", function(d) { return "translate(200, 0)"; });
});

d3.selectAll("g.node")ステートメントにはノード データが含まれており、コンソールのデータを見て確認できます。

console.log(d3.selectAll("g.node"));

別のアプローチとして、ズーム/パン動作をグラフに追加しました。

var vis = d3.select("#position")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .attr("pointer-events", "all")
            .append("svg:g")
            .call(d3.behavior.zoom().on("zoom", redraw))
            .append("svg:g");

これはうまくいきます。ただし、これは私のプログラムで発生するイベントではなく、マウスと対話するため、ズーム/パン動作を呼び出すプログラムによる方法はありますか?

4

1 に答える 1

7

ノードを右に移動したいだけの場合は、変換を設定することでそれを実現できます。インタラクティブなパンとズームが必要な場合にのみ、ズーム動作を使用してください。

ノードを選択してトランスフォームを設定しても何も起こらない理由はよくわかりませんが、ノードにトランスフォーム アトリビュートを直接設定すると、強制レイアウトによって設定された x & y 位置が上書きされるという問題が 1 つあります。 . そのため、すべてのノードを別の G 要素内に配置して、個々のノードではなくコンテナーの変換を変更することですべてのノードをオフセットできるようにすることをお勧めします。DOM は次のようになります。

<g class="nodes">
  <g class="node" transform="translate(42,128)">
    <circle r="2.5">
    <text>First Node</text>
  </g>
  <g class="node" transform="translate(64,501)">
    <circle r="2.5">
    <text>Second Node</text>
  </g>
  …
</g>

したがって、すべてのノードを右に 200px シフトしたい場合は、次のようにします。

d3.select(".nodes").attr("transform", "translate(200,0)");

シフトを元に戻すには、コンテナーの変換を削除します。

d3.select(".nodes").attr("transform", null);

より凝ったものにしたい場合、この効果を達成する別の方法として、フォース レイアウトの重心を変更し、詳細 DIV を表示または非表示にするときにグラフを再加熱することができます。これにより、ノードがスムーズに新しい位置に移動し、詳細コンテナーに道を譲ります。この例は、Shan Carter のビジュアライゼーション、Obama の 2013 年予算案をスライスする 4 つの方法で見ることができます。[支出の種類] ボタンをクリックして、円が中心にあるのを見てください。または、カスタム重力のこの例を参照してください。

于 2012-04-11T02:02:33.817 に答える