d3.js中的更新饼图没有发生

Question

我在这里做了饼图。但是当我用新数据更新内容时，它没有正确更新。这里缺少什么。单击更新按钮新数据即将开始。我只是选择所需的元素并进行更新。

my code

<div>
 <h2>Pie Chart</h2>
 <div id="graphContainer">
 </div>
 <button id="update">Update</button>
</div>



$(document).ready(function() {


var width = 400;
var height = 400;
var radius = 150;
var color = d3.scale.category20c();

var data = [{
    "label": "A",
    "value": 20
}, {
    "label": "B",
    "value": 50
}, {
    "label": "C",
    "value": 100
}];


var circle = d3.select('#graphContainer')
    .append("svg")
    .data([data])
    .attr("width", width)
    .attr("height",height)
    .append("svg:g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var pie = d3.layout.pie().value(function(pieCb) {
    return pieCb.value;
});


var arc = d3.svg.arc().outerRadius(radius);

var arcs = circle.selectAll("g.slice")
    .data(pie)
    .enter()
    .append("svg:g")
    .attr("class", "slice");
arcs.append("svg:path")
    .attr("fill", function(d, i) {
        return color(i);
    }).attr("d", function(attrD) {
        return arc(attrD);
    });

arcs.append("svg:text").attr("transform", function(d) {
    d.innerRadius = 0;
    d.outerRadius = radius;
    return "translate(" + arc.centroid(d) + ")";
}).
attr("text-anchor", "middle").text(function(d, i) {
    return data[i].label;
});

var data1 = [{"label":"A", "value":20}, 
              {"label":"B", "value":40}, 
              {"label":"C", "value":30},
              {"label":"D", "value":10}];

$('#update').click(function(){

    /*circle.data([data1]);
    arcs = circle.selectAll("g.slice")
    .data(pie);
    arcs.enter().append("svg:path")
    .attr("fill", function(d, i) {
        return color(i);
    }).attr("d", function(attrD) {
        return arc(attrD);
    });

    arcs.append("svg:text").attr("transform", function(d) {
    d.innerRadius = 0;
    d.outerRadius = radius;
    return "translate(" + arc.centroid(d) + ")";
    }).
    attr("text-anchor", "middle").text(function(d, i) {
        return data1[i].label;
    });*/

    circle.data([data1]);

var arcs = circle.selectAll("g.slice")
    .data(pie)
    .enter()
    .append("svg:g")
    .attr("class", "slice");
arcs.append("svg:path")
    .attr("fill", function(d, i) {
        return color(i);
    }).attr("d", function(attrD) {
        return arc(attrD);
    });

arcs.append("svg:text").attr("transform", function(d) {
    d.innerRadius = 0;
    d.outerRadius = radius;
    return "translate(" + arc.centroid(d) + ")";
}).
attr("text-anchor", "middle").text(function(d, i) {
    return data1[i].label;
});


});

});

Answer 1

var width  = 400;
var height = 140;
var radius = 64;

var color = d3.scale.category20c();

var data0 = [
  {"label": "A", "value": 20}, 
  {"label": "B", "value": 50}, 
  {"label": "C", "value": 100}
];
var data1 = [
  {"label": "A", "value": 20}, 
  {"label": "B", "value": 40}, 
  {"label": "C", "value": 30},
  {"label": "D", "value": 10}
];  

var circle = d3.select('#graphContainer')
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + radius + "," + radius + ")");

var layout = d3.layout.pie().value(function(d) 
{
  return d.value;
});
var arc = d3.svg.arc().outerRadius(radius);

var arcs = circle.selectAll("g.slice")
  .data(layout(data0))
  .enter()
  .append("g")
  .attr("class", "slice");

arcs.append("path")
  .attr("fill", function(d, i) 
  {
    return color(i);
  })
  .attr("d", arc);

arcs.append("text")
  .attr("transform", function(d) 
  {
    d.innerRadius = 0;
    d.outerRadius = radius;
    return "translate(" + arc.centroid(d) + ")";
  })  
  .attr("text-anchor", "middle")
  .text(function(d) 
  {
    return d.data.label;
  });

d3.select("#update").on('click', function()
{
  var arcsUpdate = circle.selectAll("g.slice").data(layout(data1));

  arcsUpdate.select("path").attr("d", arc);
  arcsUpdate.select("text").attr("transform", function(d) 
  {
    d.innerRadius = 0;
    d.outerRadius = radius;
    return "translate(" + arc.centroid(d) + ")";
  });
  
  var arcsEnter = arcsUpdate.enter();
    
  arcsEnter.append("path")
    .attr("fill", function(d, i) 
    {
      return color(i);
    })
    .attr("d", arc);

  arcsEnter.append("text")
    .attr("transform", function(d) 
    {
      d.innerRadius = 0;
      d.outerRadius = radius;
      return "translate(" + arc.centroid(d) + ")";
    })  
    .attr("text-anchor", "middle")
    .text(function(d) 
    {
      return d.data.label;
    });
  
  arcsUpdate.exit().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div>
  <button id="update" style="margin-left: 150px;">Update</button>
  <div id="graphContainer">
  </div>
</div>