Question

我正在试图找出，如何使用新数据动态更新该linegraph，将图表向左移动并从右边添加新数据 - 你得到了吗？您在https://bost.ocks.org/mike/path/

中看到的通常行为

其实我是d3（javascript）的初学者，想要使用外部JSON数据。

[
{"Values": ["1.59"], "Datetime": "2016-12-10 14:29:22.007"},
 {...}
{"Values": ["1.91"], "Datetime": "2016-12-10 14:29:23.230"},
 {...}
{"Values": ["0.52"], "Datetime": "2016-12-10 14:29:23.238"}
]

我在网上找到的是生成数据或用另一个文件更新一个文件的示例。

也许通过处理一个json数据文件并设法通过数组方法处理它来解决我的问题？

感谢您的帮助人员！

d3.json("https://api.myjson.com/bins/1814gv", function (error, data) {
if (error) throw error;
// format the data
data.forEach(function (d) {
    d.Datetime = parseTime(d.Datetime);
    d.Values = +d.Values;

});
...

Full-Code-Example on jsfiddle

Answer 1

欢迎使用Stackoverflow！你的问题有点模糊，听起来你需要深入研究D3的基础知识，以了解数据绑定的工作原理。

有一个更新模式，如block所示。当数组添加/更新/删除元素时，则在svg中添加/更新/删除相关的绑定元素。

D3使用数组的索引来确定默认情况下添加或更新数据的位置，因此如果您想在折线图的末尾添加新数据，则将其添加到数组的末尾。如果这是你向右转过来的意思吗？

如果您的意思是视觉上从状态转换到另一个状态，那么您发布的代码就有一个例子。当一个点被碾过时，工具提示从不透明度0变为1。

这里的惯例是，如果答案已经解决，则将答案标记为正确，或者您可以提出有用的答案。我不确定是否有人能够回答你的问题，因为它太宽泛了

使用JSON数据动态更新d3js linegraph

1 个答案: