Menu
I have the following simple line in d3 but haven't an issue trying to figure out how to pass it data2 and update the line to reflect the change.
<!DOCTYPE html> <html lang="en"> <head> <title>D3 Line Chart Demo</title> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="d3.min.js" type="text/javascript" charset="utf-8"></script> <body> <button class="first last" onclick="transition()"> Update </button> <div id="chart"></div> </body> <script> var data = [3, 7, 9, 1, 4, 6, 8, 2, 5]; var data2 = [3, 7, 9, 1, 4, 6, 8, 2, 15]; var width = 600; var height = 400; var max = d3.max(data); x = d3.scale.linear().domain([0, data.length - 1]).range([0, width]); y = d3.scale.linear().domain([0, max]).range([height, 0]); vis = d3.select('#chart') .style('margin', '20px auto') .style('width', "" + width + "px") .append('svg:svg') .attr('width', width) .attr('height', height) .attr('class', 'viz') .append('svg:g'); vis.selectAll('path.line') .data([data]) .enter() .append("svg:path") .attr("d", d3.svg.line().x(function(d, i) { return x(i); }) .y(y)); </script> </html> 
645
I am new to D3 but this is what I have found and I mainly figured this out from the sparklines example here.
Instead of drawing the line with this code:
vis.selectAll('path.line') .data([data]) .enter() .append("svg:path") .attr("d", d3.svg.line().x(function(d, i) {return x(i); }).y(y)); generate the line separately:
var line = d3.svg.line().x(function(d, i) { return x(i); }).y(y) Then apply it to the data:
vis.selectAll('path.line') .data([data]) .enter() .append("svg:path") .attr("d", line); Then when you want to update the data you call:
vis.selectAll("path") .data([data]) // set the new data .attr("d", line); // apply the new data values The sparklines example also shows you how to animate it :)
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
