javascript - 使用间隔更新 d3 数据

Question

我是 D3 的新手。我正在尝试使用 setInterval 每 5 秒更新一次我的数据来更新我的数据数组。我只想对数据运行间隔，而不是我的整个 D3 代码。此外，我只想在间隔运行后将新添加的索引附加到数据，同时将之前添加的间隔数据保留在图表上。 fiddle 会很棒。谢谢

//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);