Question

I’m trying to update a spline with new data, but I’m running into a problem using D3.js library.

Here is my fiddle: http://jsfiddle.net/2N2rt/22/

When a user clicks the button, the goal is to have each spline animate according to the new data. I feel like I’m really close. I have read the article ‘Thinking with Joins’ and used it to come up with the fiddle above.

Answer 1

In your fiddle, you’re applying the d attribute to the wrong element when changing the data. In the enter group, you add a new group (class people), then add a line element to the group. As such, when the data changes, you need to update the line within the group, not the group itself. To fix it, use

people.selectAll(".line").transition()

instead of

people.transition()