无法读取未定义 D3 的属性“拖动”

Question

我是 D3 的初学者，我试图用鼠标拖动一个矩形，但实际上我遇到了一些麻烦。

如果我在调用它之前定义 var drag 会得到这个错误：Cannot read property 'drag' of undefined

如果我在调用它之后定义 var drag，我会得到一个不同的错误：Cannot read property 'apply' of undefined 但实际上，在 stackoverflow 上搜索我读到要解决这个问题，我需要在调用它之前定义 var drag 并且我处于循环中。

您可以在下面看到我的代码。提前致谢。

$(document).ready(function() {
var width = 500;
var height = 500;
var fullAngle = 2 * Math.PI;
var arc2 = d3.arc()
            .innerRadius(195)
            .outerRadius(200)
            .startAngle(0.18)
            .endAngle(fullAngle / 1.02);

var svgContainer = d3.select("#container")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("border", "1px solid");

var group1 = svgContainer.append("g");
var group2 = svgContainer.append("g");
group2.append("path")
    .attr("d", arc2())
    .attr("fill", "blue")

group1.attr("transform", "translate(" + 200 + "," + 200 + ")");
group2.attr("transform", "translate(" + 250 + "," + 250 + ")");

var rectangle = svgContainer.append("rect")
          .attr("x", 150)
          .attr("y", 50)
          .attr("width", 30)
          .attr('class', 'rectangle')
          .attr("height", 70)
          .call(drag)

    var drag = d3.behavior.drag().on('drag', function () {
        var obj = svgContainer.append("rect")
        dragMove(this, obj, 'rect')
    });
});



    function setPoints(obj, prop) {
        obj[prop] = []
        var k = 0
        d3.selectAll('.rect')
            .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(rectangle, obj, prop) {
          var x = d3.event.x
          var y = d3.event.y
          setPoints(obj, prop)
          d3.select(rectangle).attr('transform', 'translate(' + x + ',' + y + ')')
          $scope.$apply()
      }

Answer 1

您在代码中使用 d3 v4。

d3.behavior.drag() 改为d3.drag 你的函数应该是这样并在使用前声明

var drag = d3.drag().on("drag", function () {
         d3.event.sourceEvent.stopPropagation(); // silence other listeners
          dragMove(this, obj, 'points')
     })

实现您的 dragMove 函数以继续查看此FIDDLE

Answer 2

您使用的是 D3 v4，并且与许多其他东西一样，拖动行为已被重命名。来自changelog：

拖动行为 d3.behavior.drag 已重命名为 d3.drag。

您需要针对此重命名调整您的代码。

var drag = d3.drag().on('drag', function () {
    dragMove(this, obj, 'points')
});

由于实施也发生了变化，因此可能需要进行其他更改才能使其真正发挥作用。但是，从您提供的代码中并不清楚这一点，值得提出另一个问题。