Question

我有一个每秒都有数据更新的图表。限制不会改变，我想做的就是清除图形并将新点放在上面。但目前这只是在最后几点之上添加了所有点。

 main.append('g')
  .attr('transform', 'translate(0,0)')
  .attr('class', 'main axis date')
  .call(yAxis); 

  g = main.append("svg:g");

function update(data){
  g.selectAll("scatter-dots")
    .data(data)  
    .enter().append("svg:circle")  // create a new circle for each value
        .attr("cy", function (d) { return y(d); } ) // translate y value to a pixel
        .attr("cx", function (d,i) { return x(xdata[i]); } ) // translate x value
        .attr("r", 4); // radius of circle
}

Answer 1

您只需添加exit()调用即可告知d3删除图表中不再位于数据集中的任何点。通常，在使用d3时，您还需要使用enter（对于新元素），update（对于现有元素）和exit（对于已删除元素）策略。模式通常如下所示：

function update(data){
  var points = g.selectAll("scatter-dots").data(data);

  points.enter().append("svg:circle");  // create a new circle for each value

  points  
    .attr("cy", function (d) { return y(d); } ) // translate y value to a pixel
    .attr("cx", function (d,i) { return x(xdata[i]); } ) // translate x value
    .attr("r", 4); // radius of circle

  points.exit().remove();
}

D3 js更新剧情只是在顶部添加新点

1 个答案: