以下代码根据对象数组的 x
、y
值创建三个可拖动的圆圈:
JS:
var obj = this
data = [{
'x': 100,
'y': 100
}, {
'x': 200,
'y': 200
}, {
'x': 300,
'y': 300
}]
var circle = d3.select("svg")
.selectAll("g")
.data(data)
.enter().append("g")
.attr('class', 'point')
.attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')'
})
.call(drag)
var drag = d3.behavior.drag().on('drag', function() {
dragMove(this, obj, 'points')
})
//// Actions
circle.append('circle')
// Methods
function setPoints(obj, prop) {
obj[prop] = []
var k = 0
d3.selectAll('.point')
.each(function() {
var c = d3.select(this)
var cX = d3.transform(c.attr('transform')).translate[0]
var cY = d3.transform(c.attr('transform')).translate[1]
obj[prop].push({
x: cX,
y: cY,
index: k++
})
})
}
function dragMove(circle, obj, prop) {
var x = d3.event.x
var y = d3.event.y
setPoints(obj, prop)
d3.select(circle).attr('transform', 'translate(' + x + ',' + y + ')')
$scope.$apply()
}
HTML:
<div id="points">
<svg width='400' height='400'></svg>
</div>
出于某种原因,call(drag)
抛出 Cannot read property 'apply' of undefined
这是为什么?以及如何解决?
最佳答案
在使用之前必须先定义变量
var drag = d3.behavior.drag().on('drag', function() {
dragMove(this, obj, 'points')
});
var circle = d3.select("svg")
.selectAll("g")
.data(data)
.enter().append("g")
.attr('class', 'point')
.attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')'
}).call(drag);
现在您将 undefined
作为 this
值传递给 call()
关于javascript - D 3's .call() returning "无法读取未定义的属性 'apply'”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34986156/