D3 atualiza dados de pizza com valores zero
Estou atualizando um gráfico de pizza com um feed JSON dinâmico. Minha função de atualização está abaixo
function updateChart(data) {
arcs.data(pie(data)); // recompute angles, rebind data
arcs.transition()
.ease("elastic")
.duration(1250)
.attrTween("d", arcTween)
sliceLabel.data(pie(data));
sliceLabel.transition()
.ease("elastic").duration(1250)
.attr("transform", function (d) {
return "translate(" + arc2.centroid(d) + ")";
})
.style("fill-opacity", function (d) {
return d.value == 0 ? 1e-6 : 1;
});
}
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function (t) {
return arc(i(t));
};
Quando o JSON tem valores 0 para todos os objetos, os arcos e rótulos desaparecem. Exatamente o que quero que aconteça.
O problema é quando eu passo um novo JSON após um que está cheio de zeros, os rótulos voltam e interpõem, etc., mas os arcos nunca são redesenhados.
Alguma sugestão sobre a correção da minha função de atualização para que os arcos sejam redesenhados corretamente depois que seus valores d forem colocados em zero?
- editar -
Lars sugeriu abaixo que eu use o .enter () exatamente da mesma maneira que fiz quando criei o gráfico. Eu tentei fazer isso, mas os resultados não mudaram. Veja a nova função de atualização abaixo.
this.updatePie = function updateChart(data) {
arcs.data(pie(data))
.enter()
.append("svg:path")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc)
.each(function (d) {
this._current = d
})
arcs.transition()
.ease("elastic")
.duration(1250)
.attrTween("d", arcTween)
sliceLabel.data(pie(data));
sliceLabel.transition()
.ease("elastic").duration(1250)
.attr("transform", function (d) {
return "translate(" + arc2.centroid(d) + ")";
})
.style("fill-opacity", function (d) {
return d.value == 0 ? 1e-6 : 1;
});
}
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function (t) {
return arc(i(t));
};
}