How do I animate a line using d3.js?

问题:

So my line extends from one side of my graph to the other, but it doesnt really animate through each data point, I assume I have to add a loop somewhere.

Heres the relevant code. Any assistance would be hugely appreciated!!!

//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

回答1:

See How to draw a path smoothly from start point to end point in D3.js

You can use a hack of stroke-dasharray. The principle is to have a dashed line with one part colored, the otherone part without coloring, and the sum of this 2 parts being equat to the path length (aka 100%).

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

See this page and this image

In practice, it become this :

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>