delay in adding circles in d3.js

Question

i have a line(xy axis) and some data points on that line. line is moving from right to left based on some fixed interval of 200ms and the data points on the line are also moving along with the line. But the issue is that, there is some delay in the movement of circles. See the jsfiddle(scroll to the right on fiddle page to see the issue ie delay in circle movement)

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) + ")");

how to prevent this delay ?

Answer 1

You can select dot1 and dot2 at same time and apply transition. Currently you are selecting them and apply transition to each of them separately hence the delay