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

D3 js update plot just adds new points on top

本文关键字：顶部 添加 新点 js 更新 D3      更新时间：2023-09-26

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

 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
}

您只需添加一个exit()调用，告诉d3从图表中删除不再存在于数据集中的任何点。通常，在使用 d3 时，您还需要使用输入（对于新元素）、更新（对于现有元素）和退出（对于已删除的元素）策略。 模式通常如下所示：

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();
}
相关文章：