[英]d3.js - transform & transition, multiple lines
我按照以下说明操作: 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');
我正在尝试使用Javascript setInterval(...)更新N行,调用方法:
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中使用了纪元时间值(xAxis显示日期:时间),因为如果我使用上面的说明性seriesData,我的示例可能会有效。
问题是“变换”,“翻译”使用x(1),x(0)返回大数字,比我需要转换的图形大 。
我修改了更新 N行方法(上面)以使用手动方法:
新问题:现在图表向左移动正确,但是行/图表弹回到右侧,每个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
有什么想法吗?
作为错误可能性而跳出来的一件事是使用的数据调用,初始是
.data(seriesData)
更新使用
.data([seriesData])
这可能会导致问题,但如果没有看到正在发生的其他事情很难说,你可以把它放在jsfiddle上吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.