D3.js输入动画

嘿，我有个简单的问题：

如何在解析时获得要绘制的线/路径？我不希望它突然出现，而是希望有一些transition（）或相关的动画效果，这样它就会平滑地出现，就像你在画它一样。最好从x轴开始到顶部，但也可以从顶部到底部。哪一个容易

根据my.attr参数的顺序，路径只会出现，不会转换，或者开发工具会说我的路径不是函数。以下是我的工作内容：

var max_line = d3.svg.line()
  .x(function(d) { return scale(d.local_max); })
  .y(function(d) { return yscale(d.Y); });    

svg.append('path')
  .attr('transform', 'translate(' +(margins.left)+','+margins.top+')')
  .attr('fill', 'none')
  .attr('stroke', 'white')
  .style('stroke-width', '4px')
  .style('stroke-dasharray', '5,3')
  .transition()
  .datum(data)
  .duration(3000)
  .attr('d', max_line);

除了enter问题上的动画外，任何人都可以告诉我为什么我的笔划划线阵列没有被应用。它总是以一条枯燥的实线出现

---

我的问题可能与之前提出的问题不同，因为将“输入动画”与“笔划数组”结合起来并不容易。

首先创建如下路径：

   var path = svg.append("path")
      .attr("d", max_line)
      .attr('fill', 'none')
      .attr('stroke', 'white')
      .style('stroke-width', '4px')
      .attr("fill", "none");

获取路径的总长度：

 var totalLength = path.node().getTotalLength();

现在使用

totallength

创建笔划dasharray（这样做使线条不可见）。稍后将

笔划dashoffset

从总长度转换为0，如下面的代码段所示

path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

---

很好的工作，我仍然有问题与中风dasharray出现，但动画部分是完美的工作了。我想知道.attr（'fill'，'none'）的两个出现，也许这就是dash数组不工作的原因？或者我们真的需要2吗？

.attr（'fill'，'none'）

用于设置路径的fill属性。。可能您可以使用

.attr（'fill'，'red'）

来查看填充路径。这应该可以解释清楚。是的，我明白这一点。我的意思是为什么片段中有两个？我只是想找出为什么stroke dasharray不工作的原因，我想可能与此有关？它与

stroke dasharray

无关，可能是其他原因。好的，我想我更了解你的解决方案。我见过其他人喜欢它，它似乎是使用stroke dasharray属性本身从下到上“绘制”线条，对吗？我以为画它是x，y坐标的转换。我的最后一个后续问题是：是否可以在整个动画中使用虚线绘制线？我这样问是因为，就风格而言，我更喜欢虚线效果。您是否愿意解释如何使用虚线样式路径的平滑开始到结束动画？也就是说，不是使用实线设置动画，而是从开始到结束使用虚线设置动画。所以在0处，它是一条虚线，在最后，它仍然是一条虚线，具有恒定的间距。在整个动画中说“笔划数组”、“5,3”？其他每个示例都使用实线动画。我需要一个虚线动画。