元素在向d3拖动行为中添加参数后不再可拖动。

Question

以下代码创建一个圆并使其可拖动：

HTML:

<svg width='400' height='400'>
  <rect width='100%' height='100%'></rect>
  <circle transform='translate(259.5,197)' r='10'></circle>
</svg>

JS:

 var drag = d3.behavior.drag().on('drag', dragMove)
 d3.select('svg').append('circle').attr('transform', 'translate(' + '100px' + ',' + '100px' + ')').attr('r', '5').call(drag)

 function dragMove(test) {
   var x = d3.event.x
   var y = d3.event.y
   console.log(test)
   d3.select(this).attr('transform', 'translate(' + '200px' + ',' + '200px' + ')')
 }

它起作用了。但是，当我向dragMove添加一个参数时：

'drag', function() { dragMove('test') }

拖动功能停止工作(不过，console.log(test)输出'test' )

为什么会发生这种情况，以及如何解决？

https://jsfiddle.net/alexcheninfo/d8doyc9r/4/

Answer 1

应该是这样的：

 var drag = d3.behavior.drag().on('drag', function(d) {

   dragMove(this);//pass the this
 })


 function dragMove(me) {


   var x = d3.event.x
   var y = d3.event.y
   //operate on me
   d3.select(me).attr('transform', 'translate(' + x + ',' + y + ')')
 }

工作代码这里

希望这能有所帮助！