3

私はd3で力指向のレイアウトを使用していますが、開発中に少し問題が発生しています。

    var circle = svg.append("svg:g").selectAll("circle") 
     .data(force.nodes()) 
   .enter().append("svg:circle")   
     .attr("r", function( d ) { 
      return d.fValue; 
     }) 
     .style('fill', function( d ) { 
       return strokeColor( d.name );   
     })
     .call(force.drag);

基本的に、force.dragで定義された「ドラッグ」動作にイベントリスナーを追加したいと思います。つまり、ノードがドラッグ時に（マウスオーバーではなく）色が変わることを確認したいと思います。これを行うために私が考えることができる唯一の2つの方法は、force.drag関数を何らかの方法で変更するか、新しいドラッグ動作を定義することです。

最初の方法でそれを行う方法はわかりませんが、この2番目の方法で試した場合、メソッドチェーンは、最初のforce.dragイベントを無視して、2番目のドラッグイベントのみを取得します。

.call(customDrag)
.call(force.drag); // This would work

別のドラッグイベントリスナーをアタッチするか、既存のforce.dragを変更して、追加する新しいアニメーションに対応するにはどうすればよいですか？

前もって感謝します

4

1 に答える 1

4

afaikforce.dragのみを呼び出すように、独自のリスナーを定義します。force.tick()

  var node_drag = d3.behavior.drag()
        .on("dragstart", dragstart)
        .on("drag", dragmove)
        .on("dragend", dragend);
  vis.selectAll("g.node").call(node_drag)

次に、必ずtick()inに電話してくださいdragmove。

これは、力のレイアウトでドラッグアンドドロップのサポートを追加するために行いました。 例については、stackoverflowの質問と回答をご覧ください

于 2012-08-08T14:59:32.933 に答える