Question

嘿，我只是一个简单的问题：

如何在解析时绘制线条/路径？我不希望它突然出现，而是有一些transition（）或相关的动画效果，以便它能够流畅地显示，就像你正在绘制它一样。从x轴到顶部，从顶部到下部的表面也是可以的。无论哪个更容易。

根据我的.attr参数的顺序，路径将只显示并且没有转换，或dev工具说我的路径不是函数。以下是我与之合作的内容：

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);

除了输入问题上的动画，还可以告诉我为什么我的笔画阵列不适用的奖励积分。它似乎总是一条无聊的实线。

我的问题可能与之前提出的问题有所不同，因为与stroke-dasharray一起输入动画并不容易。

Answer 1

首先制作一条这样的路径：

   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制作stroke-dasharray（这样做是为了让线条不可见）。稍后将stroke-dashoffset从总长度转换为0，如下面的代码段所示。

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

D3.js输入动画

1 个答案: