Question

我正在制作甜甜圈图。我现在有一个示例甜甜圈图，我想在其中添加动画。我可以在图例中添加动画，但不能在甜甜圈中添加动画。我创建了一个示例代码笔并添加了链接。我想在甜甜圈中添加动画。

谢谢。

codepen链接-here

代码---

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
  </head>

  <h1>Distribución de matrícula por sala en la región 1</h1>

<style>
  .legend {
    font-size: 13px;
  }
  h1 {
  font-size: 15px;
  text-align: center;
    }
  rect {
    stroke-width: 2;
  }
  #chart {
  height: 200px;
  margin: 0 auto;                            
  position: relative;
  width: 200px;
    }
  .tooltip {
  box-shadow: 0 0 5px #999999;
  display: none;
  font-size: 12px;
  left: 130px;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 95px;
  width: 80px;
  z-index: 10;
  line-height: 140%; /*Interlineado*/
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
    }

  .label {
   font-weight: 600;
  }
</style>:

  <body>
    <div id="chart"></div>
    <script  src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    init();
    function init(){

        var tooltip = d3.select('#chart')            
          .append('div')                             
          .attr('class', 'tooltip');                 

        tooltip.append('div')                        
          .attr('class', 'label');                   

        tooltip.append('div')                        
          .attr('class', 'count');                   

        tooltip.append('div')                        
          .attr('class', 'percent');                 

        var dataset = [
            {product: "Accessories", value: 174},
            {product: "Camcorder", value: 585},
            {product: "Computers", value: 840},
            {product: "Media Player", value: 4579},   
            {product: "Televisions", value: 5032},
            {product: "Stereo Systems", value: 2314},   
            {product: "Video Production", value: 342}
        ];

                var width = 200;
                var height = 200;
                var radius = Math.min(width, height) / 2;

                var color = d3.scaleOrdinal(d3.schemeCategory20c);

                var svg = d3.select('#chart')
                  .append('svg')
                  .attr('width', '100%')
                  .attr('height', '100%')
                  .append('g')
                  .attr('transform', 'translate(' + (width / 2) + 
                    ',' + (height / 2) + ')');

                var donutWidth = 25;

                var arc = d3.arc()
                  .innerRadius(radius - donutWidth)
                  .outerRadius(radius);

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

                var legendRectSize = 10;
                        var legendSpacing = 4;

                var path = svg.selectAll('path')
                  .data(pie(dataset))
                  .enter()
                  .append('path')
                  .attr('d', arc)
                  .attr('fill', function(d, i) { 
                    return color(d.data.product);

                  });

                path.on('mouseover', function(d) {
          var total = d3.sum(dataset.map(function(d) {
            return d.value;
          }));
          var percent = Math.round(1000 * d.data.value / total) / 10;
          tooltip.select('.label').html(d.data.product);
          tooltip.select('.count').html(d.data.value);
          tooltip.select('.percent').html(percent + '%');
          tooltip.style('display', 'block');
        });

                path.on('mouseout', function() {
          tooltip.style('display', 'none');
        });

        var legend = svg.selectAll('.legend')
          .data(color.domain())
          .enter()
          .append('g')
          .attr('class', 'legend')
          .attr('transform', function(d, i) {
            var height = legendRectSize + legendSpacing;
            var offset =  height * color.domain().length / 2;
            var horz = -4 * legendRectSize;
            var vert = i * height - offset;
            return 'translate(' + horz + ',' + vert + ')';
        });

        legend.append('rect')
          .attr('width', legendRectSize)
          .attr('height', legendRectSize)
          .transition().delay(function(d, i) { return i * 500; }).duration(500)
          .style('fill', color)
          .style('stroke', color);

        legend.append('text')
          .attr('x', legendRectSize + legendSpacing)
          .transition().delay(function(d, i) { return i * 500; }).duration(500)
          .attr('y', legendRectSize - legendSpacing)
          .text(function(d) { return d; });


     }
    </script>
  </body>

</html>

如何在甜甜圈图中添加动画

0 个答案: