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 + ')')
 }

工作代码here

希望这有帮助！

将参数添加到d3拖动行为后，元素不再可拖动

1 个答案: