通常、表示されているデータを切り替えるには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
}