обновление piechart в 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>