所以我的线从我的图形的一边延伸到另一边,但它并没有真正动画通过每个数据点,我假设我必须在某处添加一个循环。
见下相关代码。任何帮助都将非常感谢!!!
//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
答案 0 :(得分:3)
请参阅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
在实践中,它变成了这个:
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
<?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>
&#13;