D3 的 .call() 返回"Cannot read property 'apply' of undefined"

Question

下面的代码基于对象数组的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

这是为什么呢？以及如何解决它？

https://jsfiddle.net/alexcheninfo/du1a55a2/1/

Answer 1

在使用

变量之前，必须定义变量

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()