Question

我根据随机生成的数据在x-y axis中绘制了 wave 形式的2 行，我正在显示圈在表示data points的波浪上。

基于setInterval of 200 ms，我正在更新原始数据，而行（wave）正在向左移动，但问题是只有那里的圈子在初始间隔中移动，在第二个间隔之前，圆圈不会出现在波浪上。

请参阅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）

如何在d3.js中移动圆圈（数据点）

1 个答案: