d3 饼图排序转换答案

【问题标题】：d3 pie sort transitiond3 饼图排序转换
【发布时间】：2015-10-09 15:50:16
【问题描述】：

排序饼图时如何应用动画过渡？我不是指更新值，我是指将饼图的每个弧排序为move into place the way bars do here。

现有数据集（或切换数据集）有大量转换examples for updating using new values。我找不到任何关于如何重新排序的信息（使用相同的值、相同的数据集）。

我现在使用它，它只是通过应用初始化渲染时使用的相同补间来重新绘制弧，但它从零开始每个弧。

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

我是否需要以某种方式存储现有的开始和结束角度并从中运行补间？

我看到something kind of like that here，虽然这个例子是更新值，而不是排序。

谢谢。

【问题讨论】：

你可以使用类似this的东西。

标签： javascript d3.js transition pie-chart

【解决方案1】：

以 Bostock 示例 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
  }

完整代码：

<!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>

【讨论】：