Добавление новых сегментов в анимационную круговую диаграмму в D3.js

Question

Я не могу добавить сегмент в круговую диаграмму D3.js. Я знаю, что мне нужно использовать .enter() и .append(), чтобы сгенерировать новые данные, но я не уверен, как применить это, когда у меня есть сгруппированные дуги (которые мне нужны для меток).

Вот моя функция обновления:

var updateChart = function(dataset) { 
    arcs.data(donut(dataset)); 
    arcs.transition() 
    .duration(duration) 
    .attrTween("d", arcTween); 
    sliceLabel.data(donut(dataset)); 
    sliceLabel.transition() 
    .duration(duration) 
    .attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; }) 
    .style("fill-opacity", function(d) { 
     if (d.value === 0) { return 1e-6; } 
     else { return 1; } 
    }); 
}; 

Как настроить исходный граф:

var arc = d3.svg.arc() 
    .innerRadius(radius * .4) 
    .outerRadius(radius); 
var svg = d3.select("body") 
    .append("svg") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var arc_grp = svg.append("g") 
    .attr("class", "arcGrp") 
    .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"); 
var label_group = svg.append("g") 
    .attr("class", "lblGroup") 
    .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"); 

var arcs = arc_grp.selectAll("path") 
    .data(donut(data)); 
arcs.enter() 
    .append("path") 
    .attr("stroke", "white") 
    .attr("stroke-width", 0.8) 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc) 
    .each(function(d) { return this.current = d; }); 

var sliceLabel = label_group.selectAll("text") 
    .data(donut(data)); 
sliceLabel.enter() 
    .append("text") 
    .attr("class", "arcLabel") 
    .attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; }) 
    .attr("text-anchor", "middle") 
    .style("fill-opacity", function(d) { 
    if (d.value === 0) { return 1e-6; } 
    else { return 1; } 
    }) 
    .text(function(d) { return d.data.label; }); 

Полная jsfiddle: http://jsfiddle.net/kPM5L/

Что такое чистый способ добавить новые данные график?

Answer 1

Для того, чтобы переход к работе был плавным, вам необходимо добавить код, который вы используете первоначально, в свою функцию обновления. Рабочий jsfiddle here.

И некоторый код, чтобы сделать так счастлив, - это то, что должно быть в функции обновления, а также:

.enter() 
.append("path") 
.attr("stroke", "white") 
.attr("stroke-width", 0.8) 
.attr("fill", function(d, i) { return color(i); }) 
.attr("d", arc) 
.each(function(d) { return this.current = d; }); 

.enter() 
.append("text") 
.attr("class", "arcLabel") 
.attr("transform", function(d) { return "translate(" + (arc.centroid(d)) + ")"; }) 
.attr("text-anchor", "middle") 
.style("fill-opacity", function(d) { 
    if (d.value === 0) { return 1e-6; } 
    else { return 1; } 
}) 
.text(function(d) { return d.data.label; });