d3饼图排序过渡

Question

在对饼图进行排序时，我将如何应用动画过渡？ 我并不是说要更新值，而是要对饼图的每个弧线进行排序，以将其移动到此处小节的方式。

有许多过渡示例，可以使用现有数据集（或切换数据集）的新值进行更新。 我找不到有关如何重新排序的任何信息（使用相同的值，相同的数据集）。

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

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

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

我在这里看到了类似的内容，尽管此示例正在更新值，而不是排序。

谢谢。

Answer 1

建立对博斯托克例子在这里。

  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>

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