0

私はD3.jsから始めたばかりです。この例を使用して、十分に単純なドーナツチャートを作成しました。私の問題は、データソースとしてオブジェクトの配列がある場合です-たとえば、データポイント。1.fooまたは1.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新しいパイ関数を定義する以外に、実行時にアクセサーを設定する方法はありますか?

4

1 に答える 1

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
}
于 2012-05-05T19:33:45.500 に答える