D3.js Updating Spline With New Data

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

Solution 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()

Solution 2:

Here's a working example http://jsfiddle.net/3UkKW/4/. As logical Chimp answered, you've selected the wrong elements to update.

var draw = function() {

    var people = svg.selectAll(".line")
        .data(data, function(d) { return d.name; });

    people
        .transition()
        .duration(1000)
        .attr("d", function(d) { return line(d.values);});

    people.enter()
        .append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.values);})
        .style("stroke", function(d) {return color(d.name);});

    people.exit()
        .transition()
        .duration(100)
        .remove()
}