D3饼图不更新中心标签

Question

我需要更新 d3 饼图。我能够正确更新弧线，但在更新中心标签时遇到问题。我在中心的标签中显示数字的总和。有人可以帮我弄这个吗 ？ 请在下面找到plunk。 https://plnkr.co/edit/L9uBnyZmt2TDvLJDUSE1?p=info

path = path.data(pie(dataset));

  svg.selectAll('text').data(pie(dataset)).enter()
.text(function (d) {
  return (25);
})
.transition()
    .duration(1000)
    .style("opacity", 1);

  textG.select("text")
    .style("opacity", 0)
    .attr("transform", function (d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .data(pie(dataset))
    .text(function (d) {
      return d.data['count'];
    })
    .transition()
    .duration(1000)
    .style("opacity", 1);

  path.transition()
    .duration(750)
    .attrTween('d', function (d) {
      var interpolate = d3.interpolate(this._current, d);
      this._current = interpolate(0);
      return function (t) {
        return arc(interpolate(t));
      };
    });

单击图例时正在更改数据集。可以看到圆弧刷新了，但是中心的标签没有 我是 D3 的新手，但仍在解决问题。 提前致谢。

Answer 1

您还应该更新点击监听器中的中心文本和其他标签。

  var sum = d3.sum(dataset, function(d) {
    return d.count;
  });

  svg.select("text.centerText")
    .text(sum);

  textG.data(pie(dataset));

  textG.select("text")
    .transition()
    .duration(750)
    .attr('transform', function(d) {
      return 'translate(' + arc.centroid(d) + ')';
    })
    .text(function(d, i) {
      return d.data.count > 0 ? d.data.count : '';
    });

(function(d3) {
  'use strict';

  var width = 360;
  var height = 300;
  var radius = Math.min(width, height) / 4;
  var donutWidth = 40;
  var legendRectSize = 18;
  var legendSpacing = 4;

  var data1 = [{
      'label': 'Label 1',
      count: 5
    },
    {
      'label': 'Label 2',
      count: 10
    },
    {
      'label': 'Label 3',
      count: 15
    }
  ];

  var data2 = [{
      'label': 'Label 1',
      count: 30
    },
    {
      'label': 'Label 2',
      count: 20
    },
    {
      'label': 'Label 3',
      count: 9
    }
  ];


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

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

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

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

  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 = data1;
  var isDataSet1 = true;
  var path = svg.selectAll('path')
    .data(pie(dataset))
    .enter()
    .append('path')
    .attr('d', arc)
    .attr('fill', function(d, i) {
      return color(d.data.label);
    }) // UPDATED (removed semicolon)
    .each(function(d) {
      this._current = d;
    }); 



  var sum = d3.sum(dataset, function(d) {
    return d.count;
  });

  var centerText = svg.append("text")
    .attr('class', 'centerText')
    .attr('dy', '0.35em')
    .attr('text-anchor', 'middle')
    .attr('color', 'black')
    .text(sum);

  var textG = svg.selectAll('.labels')
    .data(pie(dataset))
    .enter().append('g')
    .attr('class', 'labels');

  textG.append('text')
    .attr('transform', function(d) {
      return 'translate(' + arc.centroid(d) + ')';
    })
    .attr('dy', '.35em')
    .style('text-anchor', 'middle')
    .attr('fill', '#fff')
    .text(function(d, i) {
      return d.data.count > 0 ? d.data.count : '';
    });



  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 = 5 * legendRectSize;
      var vert = i * height - offset;
      return 'translate(' + horz + ',' + vert + ')';
    });

  legend.append('rect')
    .attr('width', 10)
    .attr('height', 10)
    .style('fill', color)
    .style('stroke', color)
    .attr('rx', 5)
    .attr('ry', 5) // UPDATED (removed semicolon)
    .on('click', function(label) { 
      if (isDataSet1) {
        dataset = data2;
      } else {
        dataset = data1;
      }
      isDataSet1 = !isDataSet1;
      var rect = d3.select(this); 
      

      pie.value(function(d) { 
        
        return d.count; 
      }); 

      path = path.data(pie(dataset)); 

      path.transition() 
        .duration(750) 
        .attrTween('d', function(d) { 
          var interpolate = d3.interpolate(this._current, d); 
          this._current = interpolate(0); 
          return function(t) { 
            return arc(interpolate(t)); 
          }; 
        });

      var sum = d3.sum(dataset, function(d) {
        return d.count;
      });

      svg.select("text.centerText")
        .text(sum);

      textG.data(pie(dataset));

      textG.select("text")
        .transition()
        .duration(750)
        .attr('transform', function(d) {
          return 'translate(' + arc.centroid(d) + ')';
        })        
        .text(function(d, i) {
          return d.data.count > 0 ? d.data.count : '';
        });
    });

  legend.append('text')
    .attr('x', 13 + legendSpacing)
    .attr('y', 13 - legendSpacing)
    .text(function(d) {
      return d;
    });

})(window.d3);

#chart {
  margin: 0 auto;
  position: relative;
  /*height: 360px;
    width: 360px;*/
}

.tooltip {
  background: #eee;
  box - shadow: 0 0 5 px #999999;
  color: # 333;
  display: none;
  font - size: 12 px;
  left: 130 px;
  padding: 10 px;
  position: absolute;
  text - align: center;
  top: 95 px;
  width: 80 px;
  z - index: 10;
}

.legend {
  font - size: 12 px;
}

rect {
  cursor: pointer;
  stroke - width: 2;
}

rect.disabled {
  fill: transparent!important;
}

h1 {
  font - size: 14 px;
  text - align: center;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<body>
  <h1>Toronto Parking Tickets by Weekday in 2012</h1>
  <button type="button" onclick="changeData()">change data</button>
  <!-- NEW -->
  <div id="chart"></div>
</body>