Javascript 如何将拖动行为应用于d3.svg.arc？

如何将d3.behavior.drag（）应用于以下圆弧

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (pi/180)) //converting from degs to radians
    .endAngle(3) //just radians

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(200,200)")

我希望能够拖动圆弧。我没有看到在任何基于SVG路径的对象上使用拖动行为的任何东西（仅适用于基本元素，如圆形、矩形等）

我能找到的与拖动相关的最接近的东西是：

---

尽管看起来，如果您尝试对附加的路径（.append（“path”）“d”进行“.on”（“drag”），则会显示为未定义。如果您附加“.on”（“drag”），则会显示为未定义“对于弧本身，事件似乎不会触发…

拖动是您创建的行为，然后应用于要执行该行为的元素。将其应用于圆弧应该没有问题

因此，您的arc（轻微修改以使翻译易于访问）：

从创建您想要的行为开始。我们的拖动将更新圆弧的平移：

var drag = d3.behavior.drag()
    .on("drag", function(d,i) {
        position[0] += d3.event.dx;
        position[1] += d3.event.dy;
        d3.select(this)
        .attr("transform", function(d,i){
            return "translate(" + position + ")"
        })
    });

现在，我们将行为附加到弧：

arc.call(drag);

你可以自己试试

arc.call(drag);