Accepted answer

Where you update the line paths, via


it needs to be"path")

see mbostock's explanation of the subtle but crucial difference.

Here's a working fiddle, which also has a second path added, to verify that it works across plots.


I actually had the same issue today. So I may be able to help out. I noticed you're calling setTimeout to update the data in your html.

It seems you are calling chart() inside of that setTimeout. The only problem with that is that you aren't resetting your ranges.

Instead you should try calling demoChart(), or adding new ranges inside of your chart(). Your ranges are:

function xs(d) { return xScale(d[0]) }
function ys(d) { return yScale(d[1]) }

var xScale = d3.scale.linear().domain([0, 500]).range([0, 400]),
    yScale = d3.scale.linear().domain([0, 1]).range([400, 0]),
    line = d3.svg.line().x(xs).y(ys);

If that doesn't fix it, it may because you are updating with two setTimeouts initiating each second simultaneously. So the second data is overwriting the first immediately here:

setTimeout(function() {
  console.log("Modifying data array");
  pts[0][2][1] = 0.5;"#demo").datum(pts).call(chart);

setTimeout(function() {
  console.log("Passing new data array");"#demo").datum([[[0,1],[200,0.45],[500,0]]]).call(chart);

Here's an article I found helpful:

Related Query

More Query from same tag