D3 transition的duration对路径线条动画无效问题咨询

嗨，这个问题其实是D3过渡插值器的特性导致的，我来一步步给你解释清楚：

问题根源 #

D3的.transition()默认只对数值型、颜色型这类简单属性有内置的插值逻辑，能自动计算中间值实现平滑过渡（比如你测试的color颜色属性就属于这类）。但路径的d属性是一串复杂的SVG路径指令字符串，D3没有内置的插值器来处理“空路径”到“完整路径”的平滑过渡，所以直接给.attr("d", valueline(xy))加过渡会瞬间完成，完全看不到动画效果。

解决方案：使用路径描边动画 #

要实现线条逐步绘制的效果，我们需要利用SVG的stroke-dasharray和stroke-dashoffset属性来模拟“绘制”过程，具体步骤如下：

1. 先创建路径并设置好完整的d属性，但初始时通过虚线偏移让路径完全隐藏
2. 在过渡动画中，逐步将偏移量归零，让路径逐渐显示出来

修改你代码中添加路径的部分：

// 先创建路径，绑定正确的xy数据并设置完整路径
var path = svg.append("path")
  .data([xy]) // 注意：这里应该绑定你组装好的xy数组，不是原始的火山data哦
  .attr("class", "line")
  .attr("d", valueline(xy))
  // 初始设置：让虚线长度等于路径总长度，偏移量也等于总长度，路径完全隐藏
  .style("stroke-dasharray", function() { return this.getTotalLength(); })
  .style("stroke-dashoffset", function() { return this.getTotalLength(); });

// 添加过渡动画，将偏移量归零，实现逐步绘制效果
path.transition().duration(1000)
  .style("stroke-dashoffset", 0);

额外小提示 #

你代码里的.data([data])其实是个小错误，应该改成.data([xy])——因为valueline是用来处理你组装的xy坐标数组的，原始data是火山原始数据，和路径生成无关，这个小问题也可能导致数据绑定异常哦。

这样修改后，就能实现线条在1秒内逐步绘制出来的动画效果啦～

内容的提问来源于stack exchange，提问作者Wakhaus