score:1

You need to create new circles based on the updated data. Currently, you are only updating the data to selection, but not appending circles, and then moving existing circles to the left.

For example, you could to this:

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

See here: https://jsfiddle.net/tm5166e1/11/

This appends the data, using the timestamp as a key so you only create new circles for newly added datums.

(There is an issue when they are first added which is beyond the scope of this question, but it will be worth checking out these examples: https://bl.ocks.org/tomshanley/15a2b09a95ccaf338650e50fd207fcbf and https://bl.ocks.org/mbostock/1642874)


Related Query