0

ノードとリンクのネットワークがあります。そのうちの 1 つは中心に固定された位置ですが、ドラッグ可能です。他のものは中心にあるものの周りの力場にあります。ユーザーがいずれかのノードをドラッグすると、他のノードはリンクされているため、ユーザーの後ろにドラッグされます。中央のノードで他のノードをドラッグする可能性はありますが、他のノードのドラッグ イベントは 1 つに保たれますか?

考えてくれてありがとう、デビッド

編集: 誰かが他のすべてのノードのドラッグ リスナーを中央のノードに設定する可能性を知っていれば、問題は解決します。アイデアがあればありがたいです！ecode のどの部分がこの問題の解決に役立つかコメントを残してください。できるだけ早く投稿します。

編集: nbinowitz の助けを借りて、思い通りにノードを移動できるようになりました! しかし、新しいコード部分はどういうわけか私の座標制限を壊しました. ノードが svg から脱落しないように、すべてのノードに cx/cy-attr を配置して、ノードが svg の境界を越えないようにします。これは最初はまだ機能しますが、中心ノード (したがって「g」要素) を最初にドラッグした後、制限がシフトしたように見えます。svg 以外にドラッグされたものはありますか?

制限を提供するスクリプトの部分は

force.on("tick", function() {

   node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); })
       .attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, d.y)); });
   node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

   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; });
});
4

1 に答える 1

2

作業フィドルを参照してください：http：//jsfiddle.net/nrabinowitz/4Rj4z/

これにより、ノードがg要素に囲まれ、transform属性を使用してノードが移動します。

これを機能させるにforce.dragは、グループをプルするノードに使用することはできません。カスタムが必要ですd3.behavior.drag。残念ながら、この回答によれば、ドラッグハンドラーをノード自体に配置することはできません。グループ上に配置する必要があります。これは機能しますが、別のドラッグハンドラーのない他の要素（リンクなど）もグループをドラッグすることを意味します。pointer-eventsグループでこれを修正できる可能性があります。

于 2013-01-24T00:52:55.010 に答える