Question

我有一条线（x-y轴）和该线上的一些数据点。线基于200ms的固定间隔从右向左移动，线上的数据点也随线移动。但问题在于，圈子运动有一些延迟。请参阅jsfiddle（在小提琴页面右侧滚动以查看问题，即圆圈移动延迟）

https://jsfiddle.net/rajatmehta/tm5166e1/13/

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

如何防止这种延迟？

Answer 1

您可以同时选择dot1和dot2并应用转换。目前您正在选择它们并分别对其中的每一个应用转换，因此延迟

延迟在d3.js

1 个答案: