Question

因为我的代码存在问题，所以我正在研究链接：

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

我想我得到了

  { route: "", moduleId: "./src/routes/home", title: "Home", nav: true, name:"home" },

但对我来说不起作用而我不理解的部分是

// 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();

我的代码x如下所示：

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

域目前尚不清楚，后来的域名被定义为

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

我尝试使用x（-1），但是当我调用更新时整个图形（轴除外）消失，所以我使用类似下面的东西，最初，它似乎工作。（图形向左移动）。但随着更多数据的进入（顺便说一句，我的数据进入并正确更新数据（移出前面的数据并将最新的数据推到后面）图形开始向右移动。我可以看到图形从前面开始取点（这是正确的）但问题是，图形开始向右移动（而不是向左）。真的打败了这个问题，所以希望有人可以提出建议。

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

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;

您可以改进更新数据的方式。但这应该可以帮助您完成转换。由于点之间的距离不相等，这仍然无法正常工作。对于你的工作就像例子一样，你需要在每个点之间保持相等的距离，这样它就能顺利地向左转移。

线d3.js图错误地移位（右）

1 个答案: