javascript - My D3.js code cause new data to be added as a new graph, I want it to be appended to an existing graph. What did I do wrong? -

i have gone through several d3 tutorial briefly i'm bit confused how animation (ie transform, etc) work.

i have csv file on server that's being updated separate process , little webpage graph data.

here's have.

my question is, can see, every 10 seconds, appended new graph, opposed update current graph , draw new point. need change in order have effect?

$(document).ready(function() {     $.ajaxsetup({ cache: false });      setinterval(function() {         $('#file').load('file.csv', function(){             var input = $('#file').html();             var data = $.csv.toobjects(input);             var price = [];             var time = [];             (var row in data){                 price.push(data[row]["price"]);             }             (var row in data){                 time.push(data[row]["time"]);             }         var data = price;         w = 400,         h = 200,         margin = 20,         y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]),         x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])         var vis = d3.select("body")             .append("svg:svg")             .attr("width", w)             .attr("height", h);         var g = vis.append("svg:g")             .attr("transform", "translate(0, 200)");         var line = d3.svg.line()             .x(function(d,i) { return x(i); })             .y(function(d) { return -1 * y(d); })         g.append("svg:path").attr("d", line(data)); ....      }, 10000);  }); 

thanks lot comments!

you need change code appends elements. first time (when there no graph), can remain unchanged:

var vis = d3.select("body")         .append("svg:svg")         .attr("width", w)         .attr("height", h); var g = vis.append("svg:g")         .attr("transform", "translate(0, 200)"); var line = d3.svg.line()         .x(function(d,i) { return x(i); })         .y(function(d) { return -1 * y(d); }) g.append("svg:path").attr("d", line(data)); 

subsequent times, should follows:

vis.select("path").attr("d", line(data)); 

this assuming saved reference generated svg somewhere, can of course select again each time. might need code update scales.

note more d3 way pass data specialised function bind element , set attributes accordingly. is, initial code append line be

g.append("svg:path").datum(data).attr("d", line); 

and code update be

vis.select("path").datum(data).attr("d", line);