0

如何将 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")) ".on("drag", dragmove) "d" 出现未定义。如果您附加 ".on("drag" , dragmove)" 到弧本身，事件似乎没有触发......）

4

1 回答 1

2

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

因此，使用您的弧（进行细微修改以使翻译易于访问）：

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

你可以在这里自己试试。

于 2013-03-08T23:17:46.437 回答