因为我自己的代码有问题,所以我正在研究以下链接:
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 + ")");
最佳答案
这是一个快速实现: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;
您更新数据的方式可以改进。但这应该可以帮助您完成过渡。这仍然无法正常工作,因为点之间的距离不相等。为了让你的像示例一样工作,你需要每个点之间的距离相等,这样它才能顺利地向左过渡。
关于javascript - d3.js 线图错误移动(向右),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37540169/