5

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

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

我已经看到了原始 d3 的示例，但适应人力车似乎很难 - 或者我可能从错误的角度击中它。

4

1 回答 1

0

只有 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（虽然是法语）。

于 2016-06-15T13:28:13.697 回答