我已按照说明进行操作: http://bost.ocks.org/mike/path/用于创建和使用单线条动画单图。
而且,想出如何在图形中创建多个行: 在绘制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');
,我试图更新调用方法有N线与一个JavaScript的setInterval(...):
graph.selectAll("path")
.data(seriesData)
.attr("transform", "translate(" + x(1) + ")")
.attr("d", line)
.transition()
.ease("linear")
.duration(transitionDelay)
.attr("transform", "translate(" + x(0) + ")");
它可以完美地绘制初始设置,但只要我更新数据阵列,该行刚刚消失。
UPDATE 01
我意识到,我在X(X轴显示日期:时间)采用划时代的时间值作为我的例子,如果我用上面的说明性seriesData可能会工作。
问题是“改造”,“翻译”使用X(1),X(0)返航庞大的数字,方法大于需要我的图形上转变。
我修改了更新 N行的方法(上文)使用手工的方法:
新问题:现在图表向左移动,正确的,但线/图弹出回到右,每一个setInterval的更新执行。
这是推/正确shift'ing的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
有什么想法吗?