我的线条从图表的一侧延伸到另一侧,但它并未真正通过每个数据点进行动画效果。我认为我需要在某处添加循环。
下面是相关代码。非常感谢您提供任何帮助!!!
//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