如何使用d3.js对一个行进行动画处理？ [英] 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.

关于相关代码。

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

推荐答案

=http://stackoverflow.com/questions/13893127/>如何在D3.js中从起点到终点平滑绘制路径

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

你可以使用 stroke-dasharray 的黑客。原理是有一个部分着色的虚线，另一部分没有着色，这2个部分的总和等于路径长度（aka 100％）。

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

请参阅此网页和这个网页图片

在实践中，它变成：

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>

这篇关于如何使用d3.js对一个行进行动画处理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！