D3.jsオブジェクト間のダイナミックコネクタ

Question

私はJSとD3の両方にとても新しいので、私はこの1トンを探りましたが、あまりにも高度な例しか見つけられませんでした。

私は単純なデシジョングラフの実装を行っていますが、2つのノードを回線/パスで接続しようとしています。オブジェクトはマウスで移動することができ、パスは常にオブジェクトの位置を反映するように更新されます。

これは私の基本的な知識源であるhttps://github.com/mbostock/d3/wiki/SVG-Shapesですが、私はそれを使って何かスマートなことをする方法を理解していません。 、

http://jsbin.com/AXEFERo/5/editは派手なものを必要としないでくださいだけで、コネクタを作成する方法を理解し、オブジェクトが周囲にドラッグされているときにそれらを動的に更新しておく必要があります。ここでは

は、私がこれまで持っているものです。本当にありがとう！

Answer 1

円の間に線を描くには、特別なものは必要ありません。line要素のみです。

var line = svg.append("line") 
     .style("stroke", "black") 
     .attr("x1", 150) 
     .attr("y1", 100) 
     .attr("x2", 250) 
     .attr("y2", 300); 

動的に位置を更新するのはもう少し難しいです。現時点では、どのサークルがドラッグされているかを区別する手段がありません。これを行う1つの方法は、g要素に区別するクラスを追加することです。

var g1 = svg.append("g") 
     .attr("transform", "translate(" + 150 + "," + 100 + ")") 
     .attr("class", "first") 
     ... 

であり、他のものについても同様である。今度は、dragmove関数のクラスをオンにして、行の開始座標または終了座標を更新することができます。

if(d3.select(this).attr("class") == "first") { 
      line.attr("x1", x); 
      line.attr("y1", y); 
} else { 
      line.attr("x2", x); 
      line.attr("y2", y); 
} 

完全な例here。これを達成する他のよりエレガントな方法があります。実際のアプリケーションでは、要素にデータをバインドし、それを使ってさまざまなサークルを区別することができます。