Question

我想在随机的x和y坐标上可视化一个随机颜色的圆圈，然后每秒在随机位置添加一个额外的彩色圆圈。

我正在使用d3.timer运行一个函数，该函数将x和y坐标附加到我的dataset对象，该对象绑定到所有circle个对象。当我打印dataset对象时，我可以看到我的函数确实将新的x和y坐标附加到我的dataset对象。但是，可视化不会随新圆圈更新。如何每秒添加一个新的圆圈？

以下相关功能：

  var reshuffleData = function(){
    for (var i=0; i<5; i++){
    console.log('Reshuffling')
    dataset.push({x: randomXPosition(), y: randomYPosition()})
  }
    console.log(dataset)
    return true
  }

  d3.timer(reshuffleData, 10);

这里有完整的jsfiddle：http://jsfiddle.net/d74Le5xk/

Answer 1

由于d3.timer使用不正确，因此无法正常工作。由于d3.timer只需要一个函数来绘制下一个动画帧。我们不控制何时调用此函数，但最有可能调用它（1 /帧每秒秒）。 FPS可能每秒都在变化。

如果您想定期使用 setInterval ，也需要在更改数据集大小后重绘圆圈。

以下是工作代码的jsfiddle链接。

http://jsfiddle.net/d74Le5xk/3/

此处附上代码以供参考。

<强> HTML

<svg class='canvas'></svg>

<强>的Javascript

(function () {

  var width = 420, height = 200;

  var randomXPosition = function(d){
    return Math.random() * width;
  }
  var randomYPosition = function(d){
    return Math.random() * height;
  }

  var dataset = [];
  var circleBatchSize = 5;
  var maxCircleCount = 100;

  for (var i=0; i < circleBatchSize; i++){
    dataset.push({x: randomXPosition(), y: randomYPosition()})
  }

  var testInterval = null;
  var reshuffleData = function(){
    for (var i=0; i<circleBatchSize; i++){

        dataset.push({x: randomXPosition(), y: randomYPosition()})
        //return true;
    }
    console.log('Reshuffled ' + dataset.length)
    console.log(dataset)

    if(dataset.length > maxCircleCount) {
        clearInterval(testInterval);
    }
  }

  console.log(dataset);

  var colours = ['#FDBB30', '#EE3124', '#EC008C', '#F47521', '#7AC143', '#00B0DD'];
  var randomColour = function() {
    return colours[Math.floor(Math.random() * colours.length)];
  }
  //d3.timer(reshuffleData, 0, 5000);
  testInterval = window.setInterval(reshuffleData, 2000);

  var canvas = d3.select('.canvas')
      .attr('width', width)
      .attr('height', height)
      .style('background-color', 'black');

  var datasetOldLength = 0;
  function drawCircles() {
    if(datasetOldLength === dataset.length ) {
        return;
    }
    datasetOldLength = dataset.length;
    var circles = canvas.selectAll('circle')
      .data(dataset)
      .enter()
      .append('circle')
      .style('r', 20)
      .style('fill', randomColour)
      .style('cx', function(d) { return d.x} )
      .style('cy', function(d) { return d.y} );

    if(dataset.length > maxCircleCount) {
        return true;
    }
  }

  d3.timer(drawCircles, 1000);
})();

d3.timer使用说明

# d3.timer(function[, delay[, time]])

[function] 在每次渲染d3时调用参数。它被调用，直到它返回true。

可选 [延迟] 以毫秒为单位延迟第一次调用[function]。自第三个参数传递[时间]以来延迟。如果没有传递[时间]延迟从新的Date（）。getTime（）。

开始

可选 [时间] 是从考虑延迟时起的纪元时间。

参考https://github.com/mbostock/d3/wiki/Transitions#timers

如何将更改的数据源绑定到一组svg？

1 个答案: