使用折线图和人力车进行过渡

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（不过是法语）。