2017-03-07 19 views
0

数字の配列からデータを取る円グラフがあります。これらの数値は、ユーザーが持ついくつかのコントロールに基づいて動的に変更されます。いずれにしても、と並んで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.

へのリンクです。ありがとうございました。

答えて

0

codepenワーキング:http://codepen.io/anon/pen/JWbMGP?editors=1010

あなたの問題は、円グラフではありませんが、D3のデータが加わると。

あなたが第2のデータ配列.data(pie(d2_data2))とタイプミスを持っているまず第一に.data(pie(data2))

する必要がありますあなたはD3がenterまたはupdate両方datadata2は同じ長さを有しているもののデータを決定する方法に留意する必要があるので、 D3 data2には、入力ではなく更新として表示されます。

私はあなたのコードを一般化して、あなたが望む配列をupdate()に渡す必要があり、それはうまくいくはずです。

関連する問題