d3.jsノードをどのように翻訳すればよいですか？

Question

Iは、ノードのグループを含む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); 

これは微細にします。

idの詳細divを表示すると、これらのノードを200ピクセル右に翻訳（移動）したいと考えています。

私は次のことを試してみましたが、私は（詳細divを示す以外）detail_containerを表示したときに何がノードに起こらない：

$('#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"); 

これは問題なく動作します。しかし、これは私のプログラムで発生するイベントではなく、マウスとやり取りするので、プログラムでズーム/パン動作を呼び出す方法で、私が望む翻訳を達成することができますか？

Answer 1

ノードを右に移動したい場合は、トランスフォームを設定してノードを移動できます。インタラクティブなパンとズームが必要な場合にのみズーム動作を使用してください。

ノードを選択してトランスフォームを設定するときに何も起こりませんが、ノードにトランスフォーム属性を直接設定すると、x &のy位置が上書きされますフォースレイアウトによって。だから、おそらく、すべてのノードを別のG要素の中に入れて、個々のノードではなくコンテナ上のトランスフォームを変更することでそれらのすべてをオフセットすることができます。

<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の右に、すべてのノードをシフトしたいのであれば、その後、それだけです：：DOMは次のようになり

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

とシフトを元に戻すために、コンテナのを削除します変換：

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

あなたが本当に空想、この効果を達成するための別の方法は、FORCの重心を変えることであろうになりたかった場合eレイアウトを作成し、詳細DIVを表示または非表示にするときにグラフを再加熱します。これにより、ノードがスムーズに新しい位置に移動し、詳細コンテナの道が開かれます。シャン・カーターの視覚化であるFour Ways to Slice Obama’s 2013 Budget Proposalでは、「支出の種類」ボタンをクリックして円の中心を見ることができます。または、this example on custom gravityを参照してください。