データ (スライス) を常に更新し、ラベルを変更する d3.js にパイを設定しようとしています。データのスライスは異なる場合があり、一定ではありません (2 スライスの円と 5 スライスなど)。
次のようないくつかの例を確認しました。
http://jsfiddle.net/emepyc/VYud2/3/
http://bl.ocks.org/mbostock/3808218
しかし問題は、テキスト ラベルとパスの両方を使用しているため、私の実装はかなり異なっているということです。
問題: データが更新されず、テキストが削除されません。
ここに私のコードがあります: http://jsfiddle.net/Kitt0s/vfkSs/
function tests (data) {
data = data ? data : { "slice1": Math.floor((Math.random()*10)+1), "slice2": Math.floor((Math.random()*10)+1), "slice3": Math.floor((Math.random()*10)+1), "slice4": Math.floor((Math.random()*10)+1) };
var dataa = d3.entries(data);
var cv_path = cv_svg.selectAll("g.slice")
.data(cv_pie(dataa));
cv_path.enter()
.append("g")
.attr("class", "slice")
.append("path")
.attr("fill", function(d, i) { return cv_color(i); } )
.attr("d", cv_arc)
.each(function(d) { this._current = d; });
cv_path.transition().duration(750).attrTween("d", cv_arcTween);
cv_path.exit().remove();
var cv_text = d3.selectAll(".slice")
.append("text")
.attr("transform", function(d) {
d.innerRadius = 0;
d.outerRadius = cv_r;
return "translate(" + cv_arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.attr("font-weight", "bold")
.attr("fill", "#FFFFFF")
.attr("font-size", "30px")
.text(function(d) { return d.data.key + "(" + d.data.value + ")"; });
cv_text.exit().remove();
}
私はこれを正しく行うために非常に多くの時間を費やしましたが、それでも行き詰まっているようです (何か他のものが壊れるたびに.. :P) あなたの助けは大歓迎です!