如何使用d3.js制作线条动画？

Question

我的线条从图表的一侧延伸到另一侧，但它并未真正通过每个数据点进行动画效果。我认为我需要在某处添加循环。

下面是相关代码。非常感谢您提供任何帮助！！！

//assign start coordinates for each piece of data   
var startValueline = d3.svg.line()
    .x(0)
    .y(0);

//assigns coordinates for each piece of data    
var valueline = d3.svg.line()
    .interpolate("interpolation")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

// csv callback function
d3.csv("myData2.csv", function(data) {
    data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;});


//CLIKC FUNCTION WHICH SHOULD ANIMATE LINE      
button.on("click", function() { 
    svg.append("path")                     // Add the valueline path. 
        .attr("class", "line")
        .attr("d", startValueline(data)) // set starting position
      .transition()
        .duration(2000)
        .ease("linear")
        .attr("d", valueline(data));    // set end position;
});


  //myData.csv STORED IN A SEPERATE .CSV FILE
  myData.csv
  date,close
  1-May-12,58.13
  30-Apr-12,53.98
  27-Apr-12,67.00
  26-Apr-12,89.70
  25-Apr-12,99.00
  24-Apr-12,130.28
  23-Apr-12,166.70
  20-Apr-12,234.98
  19-Apr-12,345.44
  18-Apr-12,443.34
  17-Apr-12,543.70
  16-Apr-12,580.13
  13-Apr-12,605.23
  12-Apr-12,622.77
  11-Apr-12,626.20
  10-Apr-12,628.44
  9-Apr-12,636.23
  5-Apr-12,633.68
  4-Apr-12,624.31
  3-Apr-12,629.32
  2-Apr-12,618.63
  30-Mar-12,599.55
  29-Mar-12,609.86
  28-Mar-12,617.62
  27-Mar-12,614.48
  26-Mar-12,606.98

- Daft

---

请查看https://dev59.com/fmYr5IYBdhLWcg3wLXSh#13893296。 - methodofaction

那很有帮助，但是这条线会快速连续动画3次，并且从图表的错误侧面开始。你有什么想法吗？ - Daft

Answer 1

请查看如何在D3.js中平滑地从起点到终点绘制路径

您可以使用stroke-dasharray的技巧。原理是使用虚线来表示路径，其中一部分有颜色，另一部分没有颜色, 这两个部分的总和等于路径长度（即100%）。

dashed value = ((vertical offset of the map - top of the map) / height of the map) * path length

请参阅此页面和此图像。在实践中，它变成了这样：

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400px" height="300px">
    <style type="text/css">
        <![CDATA[
            text {
                font-size: 14px;
            }
            .back {
                stroke: #ccc;
                stroke-width: 1px;
                fill:none;
            }
            .front {
                stroke: #800;
                stroke-width: 3px;
                fill:none;
            }
        ]]>
    </style>
    <g transform="translate(10, 10)">
        <g>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="back"></path>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="front" style="stroke-dasharray: 57, 173;"></path>
            <text transform="translate(130, 20)">30% stroke-dasharray: 57, 173;</text>
        </g>
        <g transform="translate(0, 60)">
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="back"></path>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="front" style="stroke-dasharray: 86.5, 173;"></path>
            <text transform="translate(130, 20)">50% stroke-dasharray: 86.5, 173;</text>
        </g>
        <g transform="translate(0, 120)">
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="back"></path>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="front" style="stroke-dasharray: 173, 173;"></path>
            <text transform="translate(130, 20)">100% stroke-dasharray: 173, 173;</text>
        </g>
        <g transform="translate(0, 180)">
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="back"></path>
            <path d="M0,30 L30,0 L60,30 S70,20 90,7 S120,10 120,30" class="front" style="stroke-dasharray: 0, 173;">
                <animate
                    attributeName="stroke-dasharray"
                    from="0, 173" to="173, 173"
                    dur="3s"
                    repeatCount="indefinite"/>
            </path>
        </g>
    </g>
</svg>

- Hugolpz