d3饼图排序过渡

Question

How would I apply an animated transition when sorting a pie chart? 在对饼图进行排序时，我将如何应用动画过渡？ I don't mean updating values, I mean sorting each arc of the pie to move into place the way bars do here . 我并不是说要更新值，而是要对饼图的每个弧线进行排序，以将其移动到此处小节的方式。

There are plenty of transition examples for updating using new values of an existing data set (or switching data sets). 有许多过渡示例，可以使用现有数据集（或切换数据集）的新值进行更新。 I can't find anything on how to re-sort (using the same values, same data set). 我找不到有关如何重新排序的任何信息（使用相同的值，相同的数据集）。

I'm using this for now which simply redraws the arc by applying the same tween used when initializing the rendering, but it starts each arc from zero. 我现在正在使用它，它通过应用初始化渲染时使用的相同补间来简单地重绘弧，但是它从零开始每个弧。

        .attr('d', arc)
        .transition()
        .duration(1000)
        .attrTween("d", tweenPie);

    function tweenPie(b) {
        var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
        return function(t) { return arc(i(t)); };
    };

Would I need to store the existing start and end angles somehow and run the tween from those? 我是否需要以某种方式存储现有的起始角度和终止角度并从中运行补间？

I see something kind of like that here , though this example is updating values, not sorting. 我在这里看到了类似的内容，尽管此示例正在更新值，而不是排序。

Thanks. 谢谢。

Answer 1

Building on the Bostock example here . 建立对博斯托克例子在这里。

  setInterval(change, 2000);

  var sort = false;
  function change() {

    sort = !sort;

    if (sort){
      pie = d3.layout.pie() //<-- pie with default sort
        .value(function(d) {
          return d.value;
        });
    } else {
      pie = d3.layout.pie() //<-- pie with no sort
        .value(function(d) {
          return d.value;
        })
        .sort(null);
    }

    path = path.data(pie); // compute the new angles
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }

Full code: 完整代码：

 <!DOCTYPE html> <meta charset="utf-8"> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: auto; position: relative; width: 400px; } text { font: 10px sans-serif; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <body> <script> var width = 400, height = 500, radius = Math.min(width, height) / 2; var color = d3.scale.category20(); var pie = d3.layout.pie() .value(function(d) { return d.value; }) .sort(null); var defaultSort = pie.sort; var arc = d3.svg.arc() .innerRadius(radius - 100) .outerRadius(radius - 20); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var data = [{ value: 1 }, { value: 5 }, { value: 2 }, { value: 6 } ]; var path = svg.datum(data).selectAll("path") .data(pie) .enter().append("path") .attr("fill", function(d, i) { return color(i); }) .attr("d", arc) .each(function(d) { this._current = d; }); // store the initial angles setInterval(change, 2000); var sort = false; function change() { sort = !sort; if (sort){ pie = d3.layout.pie() .value(function(d) { return d.value; }); } else { pie = d3.layout.pie() .value(function(d) { return d.value; }) .sort(null); } path = path.data(pie); // compute the new angles path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs } // Store the displayed angles in _current. // Then, interpolate from _current to the new angles. // During the transition, _current is updated in-place by d3.interpolate. function arcTween(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arc(i(t)); }; } </script> </body>

d3饼图排序过渡

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-10-09 16:39:23

d3饼图排序过渡

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-10-09 16:39:23

解决方案1
2 已采纳 2015-10-09 16:39:23