D3.js transition multiple lines - data doesn't update

Question

I'm trying to get my multiple line graph to update when I filter the data. But, while the axis are transitioning as they should, my lines are updated with the old unfiltered data; causing it to go beyond the chart area. My problem seems to be the transition part but I can't seem to figure it out.

I have working examples when the y-axis stays the same, but not with this type of changing data. I could, I think, remove all the old paths but as far as I can discern I should be able to just update as long as we don't need to add more lines?

Here is a working jsFiddle instead of the old wall o' code. It's a more simple graph than the code I posted earlier but the basic problem is the same. The line(s) don't update.

Testcode:

$('input[type=button]').click( function() {

Arr1 = [{Antal:3000,Datum:parseDate("2008-03-30")},{Antal:2000,Datum:parseDate("2008-06-30")}];
Arr2 = [{Antal:5000,Datum:parseDate("2008-03-30")},{Antal:8300,Datum:parseDate("2008-06-30")}];

data = Arr1.concat(Arr2)
dsMainArr = [{name: "primary",values:Arr1},{name: "specialist",values:Arr2}];


 // redraw the line
    city
    .attr("d", line)
    .attr("transform", null);

    //update x domain for axis labels
    y.domain([
        d3.min(dsMainArr, function(c) { return d3.min(c.values, function(v) { return v.Antal; }); }),
        d3.max(dsMainArr, function(c) { return d3.max(c.values, function(v) { return v.Antal; }); })
      ]);


    //slide xAxis       
   svg.select(".y.axis")
            .transition()
            .duration(300)
            .ease("linear")
            .call(yAxis);

    //slide the line to the left 
    city.transition()
    .duration(500)
    .ease("linear")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });

});

http://jsfiddle.net/1x0k3Lzd/34/

Any idea of what is going wrong?

Answer 1

Instead of

city
.attr("d", line)
.attr("transform", null);

and

 city.transition()
   .duration(500)
   .ease("linear")
   .attr("d", function(d) { return line(d.values); })
   .style("stroke", function(d) { return color(d.name); });

You need something like

city
.data(dsMainArr)
.select('.line')
.transition()
.duration(500)
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });

You need to include data(dsMainArr) again as you've redefined dsMainArr locally.

As an aside, note

d3.select('input[type=button]').on("click", function(){})

functions as

$('input[type=button]').click(function(){})

Here is a link to the updated jsfiddle: http://jsfiddle.net/47xnn07h/2/