javascript - 使用指定样式平滑过渡路径

Question

我对这个社区相当陌生，而且我也不是最善于表达的人。我希望我不会因为发布新问题而扰乱权力机构。我之所以再次发帖，是因为我原来的问题表达得很差。即使经过反复编辑，这种困惑似乎也是无法挽回的。

我的问题如下:

我想使用中风破折号(或其他方式)来动画路径。它基本上是一条垂直路径，没有花哨的坐标。从我见过的所有示例中，“动画”路径是一条实线。我想制作一条虚线样式的路径动画。

根据我的观察，中风破折号数组被用作一种手段来实现平滑的路径动画。如果我没记错的话，这是否意味着人们不能再使用 Stroke-dasharraay 来进行样式设计？您是否必须像零和类型的情况一样选择如何利用它，要么仅动画，要么仅样式？

重申一下，我想使用虚线样式的路径进行动画处理，但根据当前的示例/代码语法，我不确定如何做到这一点。

请告知如何在附加破折号样式的路径条目时对其进行动画处理(在我的情况下，当由按钮事件调用时)。我希望从下到上绘制路径，样式为:Stroke-dasharray, '5,3'。

此版本已经过预先修订，以最大程度地减少困惑。我已经学到了很多东西，我希望这个问题能够照亮那些尚未浮出水面的小型虚拟空间。

如果仍有疑问，请随时给我打电话，让我进行澄清。

感谢您的阅读

Answer 1

您可以“增长”一条线，从 0px 过渡到总长度px。就像这样:

var points = [
  [100, 10],
  [100, 10]
];

var line = d3.svg.line()

var svg = d3.select("body").append("svg")
        .datum(points)
    .attr("width", 960)
    .attr("height", 500);

svg.append("path")
    .attr("id","grow")
    .style("stroke-dasharray", "5,3")    
    .attr("d", line)
    .transition()
      .duration(7500)                // <-- transition time
      .attr("d", "M100,400L100,10")  // <-- final lenght

Here the working code

不是最优化的选项。这是一个干净的:

<style>
line {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
  stroke-dasharray:5 3;
}
</style>
<script>
var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

svg.append('line')
  .attr({
    x1: 25,
     y1: 400,
    x2: 25,
     y2: 400
  })
  .transition()
  .duration(1500)
  .attr({
    x2: 25,
    y2: 15
  })
</script>

• and the working code

• with a button

• with Scale functionality