数字の配列からデータを取る円グラフがあります。これらの数値は、ユーザーが持ついくつかのコントロールに基づいて動的に変更されます。いずれにしても、と並んで2番目の配列data2
を作成しました。D3円グラフを正しく更新する
私はいくつかの解決策を試してみました:arcTweenを使用するか、単に棒グラフの更新について知っているものを利用するだけです。しかし、円グラフは、私が更新することができた棒グラフとは異なって機能するようです。
ここにはCodePen linkもあります。ここではどのような場合には
は私の円グラフの構造である:
var color = ["red","blue","green","orange"];
var data = [10,12,15,17];
var data2 = [21,22,14,12];
var dataKey = ["Employed","Student","Unemployed","Retired"];
var radius = 200;
var canvas = d3.select("#general_graph").append("svg")
.attr("width",400)
.attr("height",400);
var group = canvas.append("g")
.attr("transform","translate(200,200)");
var arc = d3.svg.arc()
.innerRadius(120)
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d){return d;});
var arcs = group.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class","arc");
arcs.append("path")
.attr("d",arc)
.attr("fill",function(d,i){return color[i];});
var text = arcs.append("text")
.attr("transform",function(d){return "translate("+arc.centroid(d)+")";})
.attr("text-anchor","middle")
.attr("font-size","1.5em")
.attr("fill","#fff")
.attr("font-family","Franklin Gothic")
.text(function(d){ return Math.round(d.data); });
これは期待通りに動作しますが、私は私の円グラフは、一見不可能となっている設定と同じ方法を利用例チャートを見つけよう。ここで私は、アップグレードの観点から、現時点でダウン持っているものです。
document.body.onkeyup = function(e){
if(e.keyCode == 17)
{
/*
arcs.data(pie(data2));
canvas.selectAll("path")
.attr("d",arc)
.attr("fill",function(d,i){return color[i];}); */
update();
/*
text
.data(pie)
.transition().duration(750)
.attr("transform",function(d){return "translate("+arc.centroid(d)+")";})
.text(function(d){ return Math.round(d.data); }); */
}
}
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
function update(){
var path = group.selectAll("path")
.data(pie(d2_data2))
.enter().append("path")
.attr("fill", function(d, i) { return color[i]; })
.transition()
.delay(function(d, i) {
return i * 800;
})
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);
}
});
}
あなたは「CTRL」キーを押したときにアップグレードする必要があり、チャートを見ることができるように。しかし、私は円グラフの更新の機能について誤解しているため、そうではありません。
は再び、ここですべてのヘルプは大歓迎ですCodePen posts.
へのリンクです。ありがとうございました。