how to move circles(data points) in d3.js

问题

I have 2 lines in the form of waves plotted in x-y axis based on randomly generated data and i am showing circles on the waves denoting the data points on it.

Based on setInterval of 200 ms, I am updating the original data and the lines(waves) are moving to the left, but the issue is that the only circles which are there in the initial interval are moving and for 2nd interval onward the circles are not showing up on the waves.

see the jsfiddle for the running code : https://jsfiddle.net/rajatmehta/tm5166e1/10/

here is the code :

   chartBody.append("path") // Add the valueline path
  .datum(globalData)
  .attr("id", "path1")
  .attr("class", "line")
  .attr("d", valueline);

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

chartBody.selectAll(null)
  .data(globalDataNew)
  .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);
  });





chartBody.append("path") // Add the valueline path
  .datum(globalDataNew)
  .attr("id", "path2")
  .attr("class", "line")
  .attr("d", valueline2);

any idea how to do that ?

回答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)

来源：https://stackoverflow.com/questions/46034414/how-to-move-circlesdata-points-in-d3-js

标签

javascript

d3.js

data-visualization