我已按照以下说明进行操作:http://bost.ocks.org/mike/path/ http://bost.ocks.org/mike/path/用于用单线创建单图并对其进行动画处理。
并且,弄清楚如何在图表中创建多条线:在 D3.js 中绘制多条线 https://stackoverflow.com/questions/8689498/drawing-multiple-lines-in-d3-js
主要问题:在将新数据转移并将其推入数据数组后,我很难转换多行。
我创建了N行:(时间:纪元时间,前进)
var seriesData = [[{time:1335972631000, value:23}, {time:1335972631500, value:42},...],
[{time:1335972631000, value:45}, {time:1335972631500, value:13},...],
[{time:1335972631000, value:33}, {time:1335972631500, value:23},...}],
[...],[...],...
];
var seriesColors = ['red', 'green', 'blue',...];
line = d3.svg.line()
.interpolate(interpolation)
.x(function(d) { return x(d.time); })
.y(function(d) { return y(d.value); });
graphGroup.selectAll(".line")
.data(seriesData)
.enter().append("path")
.attr("class", "line")
.attr("d", line)
.style('stroke', function(d, i) { return seriesColors[i]; })
.style('stroke-width', 1)
.style('fill', 'none');
并且正在尝试更新NJavascript setInterval(...) 调用方法的行:
graph.selectAll("path")
.data(seriesData)
.attr("transform", "translate(" + x(1) + ")")
.attr("d", line)
.transition()
.ease("linear")
.duration(transitionDelay)
.attr("transform", "translate(" + x(0) + ")");
它可以完美地绘制初始集,但是一旦我更新数据数组,线条就会消失。
更新01
我意识到我在 x 中使用纪元时间值(轴显示日期:时间),因为如果我使用上面的说明性系列数据,我的示例可能会起作用。
问题是使用 x(1)、x(0) 的“变换”、“翻译”返回巨大的数字,方式larger比我的图表需要转换。
我修改了update Nlines 方法(上图)使用手动方法:
新问题:现在图形正确地向左移动,但是线条/图形pops回到右侧,每个 setInterval 更新都会执行。
它正确地推送/移动了 seriesData 数组,但它不会继续向左滚动以显示实际正在绘制的新数据。
graph.selectAll("path")
.data(seriesData)
.attr("d", line)
.attr("transform", null)
.transition()
.ease("linear")
.duration(2000)
.attr("transform", "translate(-200)");
我使用过的另一个参考是:http://bl.ocks.org/1148374 http://bl.ocks.org/1148374
有什么想法吗?