以下代码创建一个圆并使其可拖动:
.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/
应该是这样的:
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 + ')')
}
工作代码在这里
希望这有帮助!