Question

如何将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路径的对象上看到任何使用拖动行为的东西（仅适用于圆形，矩形等基本元素）

我能找到的与拖动最接近的是： http://bl.ocks.org/mbostock/1557377

虽然看起来如果你尝试“。（”拖动“，拖动）附加路径（.append（”path“））”d“出现为未定义。如果你附加”.on（ “拖”，拖动）“到弧本身，事件似乎没有发射......”

Answer 1

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

所以使用你的弧（稍微修改以使翻译可访问）：

var position = [200,200];

var arc = vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(" + position + ")");

首先创建所需的行为。我们的拖动将更新弧的转换：

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);

您可以自己尝试here。

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

1 个答案: