3

d3 で強制指向ネットワークを完全にフリーズしようとしています! 摩擦値を 0 に設定しようとしましたが、ネットワークがより凝縮され、ノードがまだわずかにホバリングしています。

var force = d3.layout.force()
.charge(-220)
.linkDistance(70)
.friction(0);

また、ノードをドラッグ可能にしたい、つまり、ドラッグされたときに位置を移動したい。

最終的に、私はこのような Cytoscape js に似たものを取得しようとしています。

ありがとう！

4

1 に答える 1

6

最初に、特定の時間にグラフを「フリーズ」したい場合は、レイアウトの停止コマンドを使用できます。force

force.stop()

最初にグラフを自己組織化させ ( tickを使用)、次に強制を停止することをお勧めします。

// include in beginning of script
force.start();
for (var i = 0; i < n; ++i) force.tick();
force.stop();

次に、ノードをドラッグ アンド ドロップする場合はdrag、d3 のサンプル ページで検索することをお勧めします。次のリンクが見つかります。ドロップ時にノードを固定位置に設定するためのドラッグ アンド ドロップ サポートには、必要なものがすべて含まれています。ちなみに、それはまた、あなたが興味深いかもしれないstackoverflowの質問に関連しています:ドロップ時に選択したノードの位置を固定するためのドラッグアンドドロップサポートを備えたD3フォース有向グラフ

これは、力がすでに停止しているグラフに適応したドラッグアンドドロップの興味深いコードです（いくつかの行にコメントしただけですが、よくわかりません。期待どおりに機能しない場合は、コメントを外して確認してください）

var node_drag = d3.behavior.drag()
    .on("dragstart", dragstart)
    .on("drag", dragmove)
    .on("dragend", dragend);

function dragstart(d, i) {
    //force.stop() // stops the force auto positioning before you start dragging
}

function dragmove(d, i) {
    d.px += d3.event.dx;
    d.py += d3.event.dy;
    d.x += d3.event.dx;
    d.y += d3.event.dy; 
    tick(); // this is the key to make it work together with updating both px,py,x,y on d !
}

function dragend(d, i) {
    //d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
    //tick();
    //force.resume();
}

function tick() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
};
于 2013-01-13T16:04:19.807 に答える