javascript - D3.js - 补间弧位置，内半径和外半径 - D3.js Arc

Question

我正在尝试找出如何将多个圆弧补间到新位置，同时根据其内半径和外半径更改圆弧的大小。

这意味着它将从 Canvas 上的当前位置移动到新位置，同时还会根据新数据与旧数据相比的变化变形为新形状。

我看过很多例子，比如http://bl.ocks.org/mbostock/5100636这些都很棒，但是我无法根据我的特殊需要调整任何示例。我发现的大多数示例都不涉及在 Canvas 上移动弧线。

这是我首先创建弧线的方式，效果很好，并且还根据数据为弧线从 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);
            };
        });
    }
  }

• 以上所有的都很好

但我正在努力解决如何根据新数据值将圆弧补间到新位置和新大小的过程。

到目前为止，我有一个刷新函数，它接受一个新的/更新的数据集，在刷新函数中，这是我定位弧元素补间的地方。我已经通过以下方式将所有弧线移动到它们的新位置:

// 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) + ")"; });
}

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

Answer 1

好的，所以我终于找到了这个用例的最佳方法。因此，正如您从上面的示例中看到的那样，我能够毫无问题地创建圆弧，但是同时转换位置、半径 和弧弧度 的任务多个弧(在本例中为 10 个)开始变得有点棘手。

大多数例子如http://bl.ocks.org/mbostock/5100636演示如何根据不断变化的数据有效地转换圆弧弧度，但是我找不到实现此目的的示例，并且还可以将圆弧移动到 Canvas 上的新位置，同时还可以转换圆弧的半径。也许那里有一个例子，但我找不到。所以这就是我如何设法实现所有 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);
            };
        });
    }

注意: 这里对我来说最重要的是弄清楚如何获得以前的 Angular 并过渡到新 Angular ，我通过将结束 Angular 绑定(bind)到圆弧对象来实现创建和/或修改，以便我稍后可以将其拉入并用于过渡。

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

我希望这可能在某个阶段对某人有所帮助，因为上帝知道我真的为此苦苦挣扎了一段时间。

感谢所有为此提供帮助的人。