Question

我试图在每3秒后用一些随机数据更新基于d3.js的图形，但它只是第一次渲染数据。这是代码

function drawGraph(data) {
  var areaWidth = 200;
  var areaHeight = 200;
  var gdpData = data;
  var leftMargin = 10;
  var rightMargin = 10;

  var maxGDP = Math.max.apply(Math, gdpData);

  var myScale = d3.scaleLinear()
                  .domain([0, maxGDP])
                  .range([0, areaWidth - leftMargin - rightMargin]);

  var spacing = areaHeight/(gdpData.length+3);
  var fda = d3.select('#fun-drawing-area');
  var recs = fda.selectAll('rect')
    .data(gdpData);

  recs.exit().remove();

  recs.enter()
    .append('rect')
    .attr('y', function(d, i) {
      return spacing * (i+1);
    })
    .attr('x', '10')
    .attr('width', function(d, i) {
      return myScale(d);
    })
    .attr('height', '20')
    .style({
      fill: 'steelblue',
      stroke: 'black',
      'stroke-width': 1
    });
}
setInterval(function() {
  var arr = [];
  for (var i=0, t=5; i<t; i++) {
      arr.push(Math.round(Math.random() * t))
  }
  console.log(arr);
  drawGraph(arr);

}, 3000);

这里是plunkr https://plnkr.co/edit/OfFABbrZ6Teet6atLQD0?p=preview

Answer 1

在新的D3 4.x中，你必须merge选择：

recs.enter()
    .append('rect')
    .merge(recs)
    .attr('y', function(d, i) {
      return spacing * (i+1);
    })
    .attr('x', '10')
    .attr('width', function(d, i) {
      return myScale(d);
    })
    .attr('height', '20')
    .style({
      fill: 'steelblue',
      stroke: 'black',
      'stroke-width': 1
    });

这是你的傻瓜：https://plnkr.co/edit/kaFCLcUKNqSiJkpOCHvS?p=preview

PS：我将setTimeout更改为setInterval。

d3.js没有用新数据更新图表

1 个答案: