d3.js - 使用折线图和人力车的过渡

Question

我正在尝试使用 Rickshaw 的漂亮图表框架向折线图添加过渡。我是 d3 的新手，但似乎我需要添加一条直线，然后在 Rickshaw.Graph.Renderer 上的渲染函数中过渡到图形数据

我的问题是，有没有什么东西可以帮助向我的折线图添加一些动画——也许是从一条平线过渡——或者从左到右画线。

我看过原始 d3 的例子，但适应人力车似乎很难 - 或者我从错误的角度击中它。

Answer 1

只有 d3(我不知道人力车)，我们可以使用以下代码做到这一点:

var linePath = svg.append("path")
    .datum(data)
    .attr("d", line)
    .style("fill", "none")
    .style("stroke", "#3498db")
    .style("stroke-width", "1px")
    .attr("transform", "translate(150, 0)");

var linePathLength = linePath.node().getTotalLength();
linePath
    .attr("stroke-dasharray", linePathLength)
    .attr("stroke-dashoffset", linePathLength)
    .transition()
        .duration(4000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);

代码的第一部分画了一条简单的线，没有动画。

动画设置在第二部分。
使用 linePathLength 我们以 px 为单位获得线的长度。
然后将定义线条起点的stroke-dashoffset设置为0，这允许我们从左到右慢慢绘制线条。

代码已在这里找到 http://datavis.fr/index.php?page=transition (虽然是法语)。