无法读取未定义的属性'drag' 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()
      }

- Pierpaolo Ercoli

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

- Vinod Louis

---

我重新排列了我的代码，现在拖动功能正常。我在我的代码片段中添加了用于拖动矩形的函数（setPoints和dragMove），但实际上，当我单击矩形时，它会不正确地向右移动。 - Pierpaolo Ercoli

@PierpaoloErcoli 你期望的输出或者你想要做什么，也许那个定义可以帮助你。 - Vinod Louis

@PierpaoloErcoli 如果你只是想要遵循拖动路径，可以在这里找到 https://jsfiddle.net/n4m1r8nb/208/ - Vinod Louis

无论怎么折腾，都不行。虽然v3到v4的变化已经有了。 - ThinkTank

https://stackoverflow.com/questions/58954149/d3-v4-tree-is-not-draggable-on-initialization-with-anugular7 - ThinkTank

Answer 2

你正在使用D3 v4，和许多其他事情一样，拖动行为已被重命名。从变更日志中可以看到：

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

你需要调整代码以适应这个重命名。

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

由于实现方式也发生了变化，可能需要进行其他更改才能使其真正起作用。但是，从您提供的代码中并不清楚，这可能需要另一个问题。

- altocumulus

---

我重新排列了我的代码，现在拖动功能正常了。我在我的片段中添加了我调用拖动矩形的函数（setPoints和dragMove），但实际上当我点击矩形时，它会向右不正确地移动。 - Pierpaolo Ercoli

@PierpaoloErcoli请重新阅读我回答的最后一段：这是可以预料的。但正如我所说，应该将其发布为一个新问题。 - altocumulus