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

FIDDLE

现在您将undefined作为this值传递给call()

D3的.call（）返回“无法读取属性'应用'未定义”

1 个答案: