Question

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

如果我在调用之前定义了var drag，则会出现此错误：无法读取属性＆＃39;拖动＆＃39;未定义的

如果我在调用后定义var drag，我会得到一个不同的错误：无法读取属性＆＃39; apply＆＃39;未定义的但实际上，在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')
});

由于实施也发生了变化，因此可能需要进行其他更改才能使其实际运行。但是，从您提供的代码中可以看出这一点并不值得提出其他问题。

无法读取属性＆＃39;拖动＆＃39;未定义的D3

2 个答案: