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（法语为法语）。

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

1 个答案: