d3 how to tween inner radius for pie chart

2019-05-28 11:47发布

站内问答 / 前端开发
1199 1 5

I need to animate pie chart into a donut chart (or ring chart). Here is my code: 

  var arc = d3.svg.arc().outerRadius(radius-margin).innerRadius(0)
  var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(60)

  var path = pie_chart.selectAll('path')
    .data(pie(data))
    .enter()
    .append('path')
    .attr('d', arc)
    .attr('fill', function(d, i) {
      return color_scale(d.data.device)
    })
    .transition().attr('d', arc2)

Some times it's working but sometimes it is not. I have tried to apply transition to arc but not working. 

 var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(0).transition().innerRadius(60)

标签： d3.js svg
举报
1条回答
Ridiculous、
2楼-- · 2019-05-28 12:18

I would write my own arcTween function for this to take complete control of the transition:

function arcTween(d) {
  var i = d3.interpolateNumber(0, radius-70); //<-- radius of 0 to donut
  return function(t) {
    var r = i(t),
        arc = d3.svg.arc()
          .outerRadius(radius - 10)
          .innerRadius(r); //<-- create arc
    return arc(d); //<-- return arc path
  };
}

Full code:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .arc text {
    font: 10px sans-serif;
    text-anchor: middle;
  }
  
  .arc path {
    stroke: #fff;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var width = 500,
      height = 500,
      radius = Math.min(width, height) / 2;

    var color = d3.scale.category10();

    var arc = d3.svg.arc()
      .outerRadius(radius - 10)
      .innerRadius(0);

    var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) {
        return d;
      });

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var data = [10, 20, 30, 40];

    var g = svg.selectAll(".arc")
      .data(pie(data))
      .enter().append("g")
      .attr("class", "arc");

    g.append("path")
      .attr("d", arc)
      .style("fill", function(d, i) {
        return color(i);
      })
      .transition()
      .delay(100)
      .duration(5000)
      .attrTween("d", arcTween);
      
    function arcTween(d) {
      var i = d3.interpolateNumber(0, radius-70);
      return function(t) {
        var r = i(t),
            arc = d3.svg.arc()
              .outerRadius(radius - 10)
              .innerRadius(r);
        return arc(d);
      };
    }
      
  </script>
</body>

Or just give someone a headache:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .arc text {
    font: 10px sans-serif;
    text-anchor: middle;
  }
  
  .arc path {
    stroke: #fff;
  }
</style>

<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var width = 500,
      height = 500,
      radius = Math.min(width, height) / 2;

    var color = d3.scale.category10();

    var arc = d3.svg.arc()
      .outerRadius(radius - 10)
      .innerRadius(0);

    var pie = d3.layout.pie()
      .sort(null)
      .value(function(d) {
        return d;
      });

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var data = [10, 20, 30, 40];

    var g = svg.selectAll(".arc")
      .data(pie(data))
      .enter().append("g")
      .attr("class", "arc");

    var arcs = g.append("path")
      .attr("d", arc)
      .style("fill", function(d, i) {
        return color(i);
      });
    
    (function repeat() {
      arcs.transition()
        .duration(500)
        .attrTween("d", arcTweenOut)
        .transition()
        .duration(500)
        .attrTween("d", arcTweenIn)
        .each('end', repeat)
    })();
    
    function arcTweenOut(d) {
      var i = d3.interpolateNumber(0, radius-70);
      return function(t) {
        var r = i(t),
            arc = d3.svg.arc()
              .outerRadius(radius - 10)
              .innerRadius(r);
        return arc(d);
      };
    }
    
    function arcTweenIn(d) {
      var i = d3.interpolateNumber(radius-70, 0);
      return function(t) {
        var r = i(t),
            arc = d3.svg.arc()
              .outerRadius(radius - 10)
              .innerRadius(r);
        return arc(d);
      };
    }
      
  </script>
</body>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)