D3 Pie chart not updating label on center

Question

I have a requirement to update a d3 pie chart. I am able to update the arcs properly, but I am having issues in updating the label on the center. I am showing the sum of numbers in the label in the center. Can someone help me with this ? Please find the plunk below. 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));
      };
    });

Am changing the data set on click on the legend. You can see that the arc refreshes, but not the label in the center Am new to D3 and still figuring things out. Thanks in advance.

Answer 1

You should also update the center text and other labels in click listener.

  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>