我正在尝试改编动画线图示例,来自:http://bl.ocks.org/benjchristensen/1148374
<div id="graph1" class="aGraph" style="width:600px; height:60px;"></div>
<script>
function draw(id, width, height, updateDelay, transitionDelay) {
var graph = d3.select(id).append("svg:svg").attr("width", "100%").attr("height", "100%");
var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 9];
var x = d3.scale.linear().domain([0, 48]).range([-5, width]);
var y = d3.scale.linear().domain([0, 10]).range([0, height]);
var line = d3.svg.line()
.x(function(d, i) { return x(i); })
.y(function(d) { return y(d); })
.interpolate("basis");
graph.selectAll("path")
.data([data])
.enter()
.append("svg:path")
.attr("d", line);
function redraw() {
graph.selectAll("path")
.data([data])
.attr("transform", "translate(" + x(1) + ")")
.attr("d", line)
.transition()
.ease("linear")
.duration(transitionDelay)
.attr("transform", "translate(" + x(0) + ")");
}
setInterval(function () {
data.push(data.shift());
redraw();
}, updateDelay);
}
draw("#graph1", 300, 30, 1000, 1000);
</script>
这会使用 d3 v2 ( http://d3js.org/d3.v2.js ) 正确设置动画。
在 d3 v3.3.9 ( http://d3js.org/d3.v3.js ) 下没有平滑的过渡,我可以找出原因。
v2 和 v3 之间是否存在使上述脚本无效的根本差异?
最佳答案
在 GitHub 上发布:https://github.com/mbostock/d3/issues/1624
这是响应:
See #1410 for an in-depth explanation of the problem and the solution (selection.interrupt added in version 3.3). To summarise, existing transitions need to be interrupted before registering new ones, in particular when the new transition starts before or at the same time as the old one ends.
In other words, in the example above you need to replace:
.transition() with: .interrupt() .transition()
关于javascript - 具有平滑更新动画的 d3 线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19904532/