如何使用d3.js爲一條線添加動畫？

所以我的代碼從我的圖的一側延伸到另一側，但它並不真正通過每個數據點生成動畫，我假設我必須在某處添加一個循環。如何使用d3.js爲一條線添加動畫？

繼承人相關的代碼。任何援助將非常感謝！

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

來源

2012-12-20 Daft

看看http://stackoverflow.com/questions/13893127/how-to-draw-a-path-smoothly-from-start-point-to-end-point-in-d3-js/13893296# 13893296 – Duopixel

這非常有幫助，但該行快速連續動畫3次，並從圖的錯誤一側開始。任何想法，爲什麼這可能是？ – Daft

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

您可以使用stroke-dasharray黑客攻擊。其原理是用一條虛線部分着色，另一部分沒有着色，這兩部分的總和等於路徑長度（又稱100％）。

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

見this page和this image

在實踐中，成爲本：

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>

來源

2014-08-28 11:05:38 Hugolpz

如何使用d3.js爲一條線添加動畫？

回答

相關問題