Javascript D3.js-弧间位置、内径和外径-D3.js弧

我正在尝试解决如何将多个圆弧连接到新位置，同时根据其内外半径改变圆弧的大小

这意味着它将从画布上的当前位置移动到新位置，同时根据新数据相对于旧数据的变化变形为新形状

我读过很多例子，比如都很棒，但是我不能根据我的特殊需要修改任何例子。我发现的大多数例子并不涉及在画布上移动弧

这里是我如何创建的第一个地方，这是工作良好的弧，并根据数据动画从0到其结束位置的弧

// THIS IS CALLED ON LOAD OF THE GRAPH
function createLargeArcs(graph,data){
    var arc = d3.svg.arc()
                .innerRadius(function (data) { return (data.r * 5) + 5; })
                .outerRadius(function (data) { return data.r * 5 })
                .startAngle(0);


    var endAngleFunction = function (data) {
        return (data.percentage) * ((2 * Math.PI) / 180);
    };

    // a global variable
    arcGroup = graph.append("g")
        .attr("class", "arcsGroup");

    var arcs = arcGroup.selectAll("path")
                        .data(data)
                        .enter()
                        .append("svg:path")
                        .attr("transform", function (d) { return "translate(" + xScale(d.u) + "," + yScale(d.t) + ")"; })
                        .style("fill", "red");

    arcs.transition()
        .duration(750)
        .call(arcTween);

    // http://bl.ocks.org/mbostock/5100636
    function arcTween(transition, newAngle) {
        transition.attrTween("d", function (d) {
            var interpolate = d3.interpolate(0, endAngleFunction(d));
            return function (t) {
                d.endAngle = interpolate(t);
                return arc(d);
            };
        });
    }
  }

• 以上所有的工作都很好

但这是一个计算如何根据新数据值将圆弧调整到新位置和新大小的过程，我正在努力解决这个问题

到目前为止，我有一个刷新功能，它接受一个新的/更新的数据集，在刷新功能中，这是我瞄准arc元素之间的地方。 我已通过以下操作将所有圆弧移动到其新位置：

// THIS IS CALLED LATER ON WHEN DATA CHANGES - ITS HERE I NEED TO IMPLEMENT
function refresh(data){

    var arcs = arcGroup.selectAll("path")
                        .data(newData)

    arcs.transition()
        .duration(1000)
        .attr("transform", function(d) { return "translate("+ xScale(d.users) + "," + yScale(d.traffic) + ")"; });
}

---

任何帮助都将不胜感激。谢谢

好的，所以我终于找到了这个用例的最佳方法。从上面的例子中可以看出，我可以毫无问题地创建圆弧，但是同时跨越多个圆弧（本例中为10个）转换位置、半径和圆弧弧度的任务开始变得有点棘手

大多数示例（如）都演示了如何根据更改的数据高效地转换圆弧弧度，但是我找不到一个示例可以实现这一点，并且在转换圆弧半径的同时将圆弧移动到画布上的新位置。也许有一个例子，但我找不到。下面是我如何实现所有3个转换的

    // A helper function to convert a percentage value to radians
    var endAngleFunction = function (d) {
        return (d['percentage-value']) * ((2 * Math.PI) / 180);
    };

    // create an arc object but without setting the "endAngle"
    var arc = d3.svg.arc()
                .innerRadius(function (data) { return (d.r * 5) + 5; }) // calculating the radius based on a value within the data (different for each arc)
                .outerRadius(function (data) { return d.r * 5 })
                .startAngle(0);

    // selecting all svg paths (arcs) within arcGroup, a global variable referencing the group each arc gets appended to when created
    var arcs = arcGroup.selectAll("path")
                        .data(data);

    // transition the position of the arc to its new position
    arcs.transition("position")
        .duration(1000)
        .attr("transform", function(d) { return "translate("+ xScale(d.u) + "," + yScale(d.t) + ")"; });

    // transition the arc radians to new value 
    arcs.transition("newArc")
        .duration(1000)
        .attr("endAngle", function(d) { return endAngleFunction(d); }) // binding the new end Angle to the arc for later reference to work out what previous end angle was
        .transition()
        .delay(500)
        .duration(1000)
        .call(arcTween);

    // A function to tween the arc radians from a value to a new value - inspired by http://bl.ocks.org/mbostock/5100636
    function arcTween(transition, newAngle) {
        transition.attrTween("d", function (d) {
            var interpolate = d3.interpolate(d3.select(this).attr("endAngle"), endAngleFunction(d));
            return function (t) {
                d.endAngle = interpolate(t);
                return arc(d);
            };
        });
    }

注意：这里对我来说最重要的事情是研究如何将以前的角度和过渡设置为新角度，这是通过在创建和/或修改时将结束角度绑定到圆弧对象来实现的，这样我可以稍后将其拉入并用于过渡

这对我来说似乎很好。然而，由于我是D3新手，可能有一种更有效的方法来实现这一点，甚至可以构建代码或事物的调用顺序。从这里开始，我将尝试加强这一点，并找出一种更有效的方法

我希望这能在某个阶段对某些人有所帮助，因为天知道我真的为此奋斗了一段时间

---

感谢所有在这方面给予帮助的人

原则上，您所需要做的就是同时应用这两个转换。你试过了吗？@Larskothoff-说实话，我不太明白我应该在这里做什么来实现当前半径（内/外）到新值的转换。我是D3的新手。你能提供一些你所指内容的建议或例子吗？你只需做

arcs.transition（）.duration（750.attr（“transform”），call（arcTween）

如果我理解正确。我已修改了原始示例以处理自定义数据。请尝试显示代码的工作示例或至少解释数据的格式。@DavidLemon-谢谢，但我正试图实现的是转换到新位置、新半径和新弧值的方法。