使用 d3 图形库,我似乎无法让路径绘制缓慢,因此可以看到它们在增长。
This site在“折线图(展开)”部分有一个完美的例子,但没有给出该部分的代码。有人可以帮助我了解可以实现这一目标的 D3 代码行吗?
当我尝试附加 delay() 或 duration() 时,例如在以下代码片段中,路径仍然立即绘制,并且该段之后的所有 SVG 代码都无法呈现。
var mpath = svg.append ('path');
mpath.attr ('d', 'M35 48 L22 48 L22 35 L22 22 L35 22 L35 35 L48 35 L48 48')
.attr ('fill', 'none')
.attr ('stroke', 'blue')
.duration (1000);
最佳答案
在 svg 中设置线条动画时的常见模式是设置路径长度的 stroke-dasharray
,然后设置 stroke-dashoffset
动画:
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
你可以在这里看到一个演示: http://bl.ocks.org/4063326
关于javascript - 无法使用 D3 使路径绘制缓慢增长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13353665/