使用D3.js在線圖中動畫線條

Question

我有我的線圖，有2行。 繪製我的線條圖的數據是從.csv文件中提取的。

任何人都可以解釋我可以如何開始一個空的圖形，當我點擊一個按鈕，我的線條在整個圖形上動畫？

在此先感謝！

var button = d3.select（「＃button」）;

var margin = {top: 30, right: 20, bottom: 50, left: 60}, 
width = 700 - margin.left - margin.right, 
height = 300 - margin.top - margin.bottom; 

var parseDate = d3.time.format("%d-%b-%y").parse; 


//treats value passed to it as a time/date 
//OUTPUT RANGE 
var x = d3.time.scale() 
    .range([0, width]); 

//OUTPUT RANGE 
var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom") 
    .ticks(5); 

var yAxis = d3.svg.axis().scale(y) 
    .orient("left") 
    .ticks(5); 

//assigns coordinates for each piece of data  
var valueline = d3.svg.line() 
    .interpolate("linear") 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.close); }); 

//second line data 
var valueline2 = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.open); }); 

//create area for 'area' below line 
var area = d3.svg.area() 
    .x(function(d) { return x(d.date); }) 
    .y0(height) 
    .y1(function(d) { return y(d.close); });  

//creates area to draw graph  
var svg = d3.select("body") 
    .append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
//groups content  
.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

function make_x_axis() { 
    return d3.svg.axis() 
     .scale(x) 
     .orient("bottom") 
     .ticks(5) 
} 

function make_y_axis() { 
    return d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .ticks(30) 
} 

// csv callback function 
d3.csv("myData2.csv", function(data) { 
    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    //+ operator sets any 'close' values to nuneric 
    d.close = +d.close; 
    d.open = +d.open; 

}）;

//INPUT DOMAINS 
//.extent() returns min and max values of argument 
x.domain(d3.extent(data, function(d) { return d.date; })); 
//returns max of whichever set of data is bigger 
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, d.open); })]); 

//draws lines 
//passes the valueline array to path object 
svg.append("path") // Add the valueline path. 
    .attr("class", "line") 
    //adds dashed line 
    .style("stroke-dasharray", ("5, 9")) // <== This line here!! 
    .attr("d", valueline(data)); 


button.on("click", function() { 
    svg.append("path")  // Add the valueline2 path. 
     .attr("class", "line2") 
     .transition() 
     .attr("d", valueline2(data)); 
    }) 


svg.append("g") // Add the X Axis 
    .attr("class", "x axis") 
    //moves x axis to bottom of graph 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

//text label for x-axis 
svg.append("text") // text label for the x axis 
    .attr("transform", "translate(" + (width/2) + " ," + (height + margin.bottom - 5) + ")") 
    .style("text-anchor", "middle") 
    .text("Date"); 

svg.append("g") // Add the Y Axis 
    .attr("class", "y axis") 
    .call(yAxis); 

//text label for y-axis 
svg.append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 0 - margin.left) 
    .attr("x",0 - (height/2)) 
    //adds extra left padding as original y pos = 0 
    .attr("dy", "1em") 
    .style("text-anchor", "middle") 
    .text("Value"); 


//adding a title to the graph 
svg.append("text") 
    .attr("x", (width/2)) 
    .attr("y", 0 - (margin.top/2)) 
    .attr("text-anchor", "middle") 
    .style("font-size", "16px") 
    .style("text-decoration", "underline") 
    .text("Me Graph Larry"); 


//draw x axis grid 
svg.append("g") 
    .attr("class", "grid") 
    .attr("transform", "translate(0," + height + ")") 
    .call(make_x_axis() 
    .tickSize(-height, 0, 0) 
    .tickFormat("") 
) 

//draw y axis grid 
svg.append("g") 
    .attr("class", "grid") 
    .call(make_y_axis() 
    .tickSize(-width, 0, 0) 
    .tickFormat("") 
) 

});<!--d3.csv close--> 

Answer 1

您需要設置的動畫合理的起始值：

var startvalueline2 = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(0);  }) 

button.on("click", function() { 
    svg.append("path")      // Add the valueline2 path. 
     .attr("class", "line2") 
     .attr("d", startvalueline2(data)); // set starting position 
     .transition() 
     .attr("d", valueline2(data));  // set end position 
}); 

您也可以看看小李的path transitions page。要了解如何在使用svg:path時實現流暢（非搖擺式）動畫。