D3.js - レイアウト - 値アクセサー

Question

私はちょうどD3.jsで始まります。私はthis exampleを使って簡単なドーナツチャートを作成しました。私の問題は、私はデータソースとしてオブジェクトの配列を持っている場合 - 元のデータポイントです。​​.fooまたは​​.barです。私はそれらの間を切り替えたいと思いますが、どうすればこれをやりますか？私の現在の解決策は醜いので、それを実行する適切な方法ではありません - 下のコード。

//Call on window change event 
//Based on some parameter, change the data for the document 
//vary d.foo to d.bar and so on 

var donut = d3.layout.pie().value(function(d){ return d.foo}) 
arcs = arcs.data(donut(data)); // update the data 

私は新しいパイの関数を定義する以外に、実行時にvalueアクセサを設定することができます方法はありますか？

Answer 1

一般に、表示されているデータを切り替えるには、redraw()関数を作成し、グラフのデータを更新します。再描画では、データ要素が変更されたときにどうすべきか、新しいデータ要素が追加されたときに何が行われるべきか、データ要素が削除されるときに何が行われるべきかの3つのケースを確実に処理する必要があります。

通常は次のようになります（この例では、パンニングによってデータセットが変更されますが、実際には問題ありません）。完全なコードはhttp://bl.ocks.org/1962173です。

function redraw() { 

    var rects, labels 
     , minExtent = d3.time.day(brush.extent()[0]) 
     , maxExtent = d3.time.day(brush.extent()[1]) 
     , visItems = items.filter(function (d) { return d.start < maxExtent && d.end > minExtent}); 

    ... 

    // upate the item rects 
    rects = itemRects.selectAll('rect') 
     .data(visItems, function (d) { return d.id; }) // update the data 
     .attr('x', function(d) { return x1(d.start); }) 
     .attr('width', function(d) { return x1(d.end) - x1(d.start); }); 

    rects.enter().append('rect') // draw the new elements 
     .attr('x', function(d) { return x1(d.start); }) 
     .attr('y', function(d) { return y1(d.lane) + .1 * y1(1) + 0.5; }) 
     .attr('width', function(d) { return x1(d.end) - x1(d.start); }) 
     .attr('height', function(d) { return .8 * y1(1); }) 
     .attr('class', function(d) { return 'mainItem ' + d.class; }); 

    rects.exit().remove(); // remove the old elements 
}