javascript - d3.js 线图错误移动(向右)

Question

因为我自己的代码有问题，所以我正在研究以下链接:

https://bost.ocks.org/mike/path/

我想我已经低于

// push a new data point onto the back
data.push(random());

// redraw the line, and then slide it to the left
path
    .attr("d", line)
    .attr("transform", null)
  .transition()
    .attr("transform", "translate(" + x(-1) + ")");

// pop the old data point off the front
data.shift();

但是对我不起作用且我不明白的部分是

.attr("transform", "translate(" + x(-1) + ")");

我的代码的 x 如下所示:

var x = d3.time.scale().range([-5, width])  

此时域未知，稍后域定义为

x.domain(d3.extent(callbackData, function(d){return d.reg_date;}));

我尝试使用 x(-1) 但当我调用更新时整个图形(轴除外)消失，因此我使用如下所示的内容，最初，它似乎有效。(图形向左移动)。但是随着更多的数据进入(顺便说一句，我的数据进入并正确更新数据(移开前面的数据并将最新数据推到后面)图表开始向右移动。我可以看到图表开始从前面获取点(这是正确的)但问题是，图形开始向右移动(而不是向左)。这个问题真的让我很头疼，所以希望有人能提供建议。

        path
          .attr("d",line)
           .attr('transform', null)
          .transition()
           .duration(300)
           .ease('linear')
           .attr("transform", "translate(" + -2  + ")");

Answer 1

这是一个快速实现:https://jsfiddle.net/thatOneGuy/j2eovk9k/8/

我添加了这个来计算 x 刻度之间的距离:

var testtickArr = y.ticks(10);
var testtickDistance = y(testtickArr[testtickArr.length - 2]) - y(testtickArr[testtickArr.length - 1]);

然后用它作为移动路径的距离:

path
.attr("d", line) 
.transition()
.duration(1000)
.ease('linear')
.attr("transform", function(d) {
  console.log(d)
  return "translate(" + (pathTrans) + ")";
})

另外，更新翻译值:

  pathTrans -= testtickDistance;

您更新数据的方式可以改进。但这应该可以帮助您完成过渡。这仍然无法正常工作，因为点之间的距离不相等。为了让你的像示例一样工作，你需要每个点之间的距离相等，这样它才能顺利地向左过渡。