延迟在d3.js中添加圈子

Question

我有一条线（xy轴）和那条线上的一些数据点。 线基于200ms的固定间隔从右向左移动，并且线上的数据点也随线一起移动。 但是问题是，圈子的运动有些延迟。 参见jsfiddle（滚动到小提琴页面的右侧以查看问题，例如，圆圈移动的延迟）

https://jsfiddle.net/rajatmehta/tm5166e1/13/

chartBody.selectAll(".dot1")
  .data(globalData, function(d){ return d.timestamp; })
  .enter()
  .append("circle")
  .attr("class", "dot1")
  .attr("r", 3)
  .attr("cx", function(d) {
    return x(d.timestamp);
  })
  .attr("cy", function(d) {
    return y(d.value);
  });

    chartBody.selectAll(".dot2")
  .data(globalDataNew, function(d){ return d.timestamp; })
  .enter()
  .append("circle")
  .attr("class", "dot2")
  .attr("r", 3)
  .attr("cx", function(d) {
    return x(d.timestamp);
  })
  .attr("cy", function(d) {
    return y(d.value);
  });

  d3.selectAll(".dot1")
    //.data(globalData)
    .transition()
    .duration(duration)
    .ease("linear")
    .attr("transform", "translate(" + String(dx) + ")");


  d3.selectAll(".dot2")
    //.data(globalDataNew)
    .transition()
    .ease("linear")
    .duration(duration)
    .attr("transform", "translate(" + String(dxNew) + ")");

如何防止这种延误？

Answer 1

您可以同时选择dot1和dot2并应用过渡。 当前，您正在选择它们并将过渡分别应用于它们，因此会延迟