如何在d3.js中移动圆(数据点) [英] how to move circles(data points) in d3.js

问题描述

我根据随机生成的数据在x-y axis中绘制了2条线，以波的形式绘制，并且我在表示data points的波浪.

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.

基于setInterval of 200 ms，我正在更新原始数据，并且线(波浪)向左移动，但是问题是仅圆圈在初始间隔正在移动，并且在第二个间隔之后，圆圈没有出现在波浪上.

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.

有关运行代码，请参见jsfiddle: https://jsfiddle.net/rajatmehta/tm5166e1/10/

see the jsfiddle for the running code : 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);

知道怎么做吗?

推荐答案

您需要根据更新后的数据创建新的圈子.当前，您仅将数据更新为选定内容，而不是添加圆，然后将现有圆向左移动.

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.

例如，您可以这样做:

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/

这将使用时间戳作为键来追加数据，因此您只能为新添加的基准创建新的圆.

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)

这篇关于如何在d3.js中移动圆(数据点)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！