4

を使用せずにイベントターゲット（DOM要素）にアクセスする方法はありますthisか？私はオブジェクトの中にいthisて、オブジェクト自体にバインドされたいです。グローバルd3.eventは明らかにターゲットを保存しません-d3.event.target機能しません。どんな手掛かり？

編集：これが私が実行しているコードです（それはコーヒースクリプトです）：

@nodes = @svg.selectAll('g.node')
  .data(@nodes, (d) -> d.key)
  .enter()
  .append('g')
  .attr('class', 'node')
  .attr('transform', (d) => "translate(#{@x d.x},#{@y d.y})")
@nodes.append('svg:rect')
  .attr('width', @x 100)
  .attr('height', @y 50)

node_drag = d3.behavior.drag().origin(Object).on('drag', @drag_move)
@nodes.call node_drag


drag_move: (d, i) ->
  console.log d3.event.target

ブラウザコンソールの出力は

function e(){this.on("mousedown.drag",t).on("touchstart.drag",t)}

debuggerステートメントを追加して手動でオブジェクトを検査する場合も同じです。何らかの理由d3.event.targetで、イベントオブジェクトではなく関数を返します。

4

2 に答える 2

2

dragmove関数でd3.event.targetの値をリセットすることで、この問題を解決しました。

d3.event.target = event.target;

次に、d3.event.targetは、drag（）..のような関数のターゲットDOM要素になります。

于 2015-01-27T16:11:05.947 に答える
0

これを再現できますが、バグとしてログに記録する必要があると思いたくなります。ドラッグコントロール自体をとして渡すことには何の意味もありませんd3.event.target。

この場合、修正は簡単なようですrect。代わりに、選択範囲でドラッグ動作を呼び出すだけです。

@rect = @nodes.append('svg:rect')
  .attr('width', @x 100)
  .attr('height', @y 50)

node_drag = d3.behavior.drag().origin(Object).on('drag', @drag_move)
@rect.call node_drag

ただし、ノードグループに複数の要素があり、どれがドラッグされているかを理解したい場合は、これが非常に煩わしいことがわかりました。

于 2012-10-18T20:04:48.127 に答える