javascript - 如何在 d3.js 中移动圆圈(数据点)

Question

我有 2 条线，以波浪的形式绘制在x-y轴上，基于随机生成的数据，并且我显示圆圈在波浪上表示其上的数据点。

基于setInterval of 200 ms，我正在更新原始数据，线条(波浪)向左移动，但问题是>只有初始间隔中存在的圆圈正在移动，而对于第二个间隔，圆圈不会显示在波浪上。

查看 jsfiddle 中的运行代码:https://jsfiddle.net/rajatmehta/tm5166e1/10/

这是代码:

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

知道如何做到这一点吗？

Answer 1

您需要根据更新的数据创建新圈子。目前，您仅将数据更新为选择，而不是附加圆圈，然后将现有圆圈向左移动。

例如，您可以这样做:

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

请参见此处:https://jsfiddle.net/tm5166e1/11/

这会使用时间戳作为键来附加数据，因此您只需为新添加的数据创建新圆圈。

(首次添加它们时存在一个问题，这超出了本问题的范围，但值得查看这些示例: https://bl.ocks.org/tomshanley/15a2b09a95ccaf338650e50fd207fcbf 和 https://bl.ocks.org/mbostock/1642874 )