javascript - 无法读取未定义 D3 的属性 'drag'

Question

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

如果我在调用它之前定义了 var drag，则会出现此错误:无法读取未定义的属性“drag”

如果我在调用 var drag 后定义它，我会得到一个不同的错误:无法读取未定义的属性“应用”但实际上，在 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