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

使用间隔更新d3数据

1 个答案: