Javascript 第d3.js行图形错误移动（向右）

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

我想我到下面去了

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

---

这是一个快速实现：

我添加了以下内容以计算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;

---

更新数据的方式可以改进。但这将有助于过渡。由于点之间的距离不相等，这仍然无法正常工作。要像示例一样工作，您需要每个点之间的距离相等，以便平滑过渡到左侧。

x（-1）用于将图形向左移动。因此，推动会将一个添加到右侧，而移位会删除第一个元素。如果你可以模拟JSFIDLE，我们可以帮你一把谢谢。我现在要睡几个小时，然后真正完成该模拟。我整晚都在看这个，虽然有一点进展，但还是很坚持，但我需要leep几个小时。好的。我只是问一个问题，你是在使用你发布的最后一段代码吗？如果你是，它将无法正常工作。翻译必须通过刻度（x/y），以便在图表上正确缩放。因此（-2）应该是x（-2）是的。但问题是当我做那个图形消失的时候，我不知道如何解决这个问题。当我只做-2时，它至少对一个样本有效。嗯，不完全确定你的意思，但现在我的眼睛几乎因为整晚看这个东西而闭上了。我会在几小时后醒来的第一件事就是准备好模型urs.非常感谢你现在向左移动..只是想弄清楚为什么新数据没有被推入callbackData数组。所以我改为callbackData.push（callbackData1）；在将数据推送到callbackData中时，现在它会被更新，但看起来一旦初始图形被推到左边，我就没有更多的数据被绘制了（即使callbackData有20个对象）。此外，我真的不明白为什么需要用y来计算x记号之间的距离。你能详细说明一下吗？（我玩了游戏，将它们改为x.ticks和x（），但它并没有像我想的那样工作）你所做的超出了我在这里得到帮助的想象。非常感谢你，我将真正深入研究这一点。也感谢你的最后一个例子。谢谢你！现在我很好，现在我必须处理w/动态y轴，它有很大的范围，这不是很好。我将为此在单独的页面上创建另一篇文章。谢谢你