使用間隔更新d3數據

Question

我是D3的新手。 我正在嘗試使用setInterval更新我的數據數組，每5秒更新一次我的數據。 我只想對數據運行間隔，而不要對整個D3代碼運行。 另外，我只想在間隔運行后將新添加的索引添加到數據，同時將先前添加的間隔數據保留在圖表上。 小提琴會很棒。 謝謝

//DATA//
    $scope.reg = data;
    var rate  = parseInt($scope.reg);
         var bardata=[];
      setInterval(function(){
    bardata.push(rate);
    console.log("REG", $scope.reg, bardata);
    }, 5000);

//D3//
                var height = 500,
                        width = 600,
                        barwidth = 50,
                        barOffset = 5
              d3.select('#showResponder').append('svg')
                      .attr('width', width)
                      .attr('height', height)
                      .style('background', 'lightgrey')

                      .selectAll('rect').data(bardata) //this needs to update every 5 secs
                      .enter().append('rect')
                      .style('fill','black')
                      .attr('width', barwidth)
                      .attr('height', function(d){return d;})

                .attr('x', function(d,i){
                    return i *(barwidth + barOffset)
                })

                .attr('y', function(d){
                    return height - d;
                })

Answer 1

您確實想在每次更新數據時都運行d3代碼，但不是全部。 您有一些應該在開始時運行的d3設置代碼，以及一些使d3元素看起來正確的更新代碼。

請注意，一開始需要如何運行一些代碼。 然后，更新代碼處理更改數據和設置輸入元素的樣式。 您只需使用新數據調用更新程序即可使其正確更新。

// Setup code
var height = 500,
    width = 600,
    barwidth = 50,
    barOffset = 5
var container = d3.select('#showResponder').append('svg')
    .attr('width', width)
    .attr('height', height)
    .style('background', 'lightgrey')

var rects = container.selectAll('rect').data(bardata)

// Update code
function updateData(data) {
    rects = rects.data(bardata)
    rects.enter().append('rect')
        .style('fill','black')
        .attr('width', barwidth)
        .attr('height', function(d){return d;})
        .attr('x', function(d,i){
            return i *(barwidth + barOffset)
        })
        .attr('y', function(d){
            return height - d;
        })
}

// Data source
$scope.reg = data;
var rate  = parseInt($scope.reg);
var bardata=[];
setInterval(function(){
    bardata.push(rate);
    updateData(bardata)
}, 5000);