Why is the line not changing?

Question

I have a D3 chart which should update after 2 seconds. While the axis change, the line itself does not.

https://jsfiddle.net/horacebury/jwcngdLv/1/

I think this should be updating the axis and the line, but what am I missing?

// Make the changes
svg.select(".line")   // change the line
   .duration(1000).attr("d", valueline(data));
svg.select(".x.axis") // change the x axis
   .duration(1000).call(xAxis);
svg.select(".y.axis") // change the y axis
   .duration(1000).call(yAxis);

Answer 1

You missed to add the class to the path like this:

svg.append("path") // Add the valueline path.
.classed("line", true) //add class to the path
.attr("d", valueline(data));

Reason: In your update function you are using class name line to select the path.

 svg.select(".line")   // change the line
    .duration(1000).attr("d", valueline(data));

working code here