元素不再拖動添加參數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 + ')') 
} 

工作代碼here

希望這有助於！