Updating line graph - d3.js

Question

I'm looking for the best way to update my line graph. The incoming data is not 'new', it's just switching between many different data sets. My issue is that .append('path') simply isn't working, and I'm not sure why. It may have to do with my grouping: I like to put margins around my graphs so axis and labels aren't clipped. To do this, my HTML looks like the following...
<svg w, h id='svg-container'>
<g translate(w - margin, h - margin) id='chart-container'>
<g id='x-axis'>
<g id='y-axis'>
In my code I would like to select chart-container and append a <path d='...' id='line'>. Later, when updating the graph, I would hope to be able to simply select('chart-container').select('path') and update that selection.
Initial setup of the chart:
var svgContainer = d3.select(element[0]).append('svg')
.attr({
width: width + margin.left + margin.right,
height: height + margin.top + margin.bottom
})
.classed('svg-container', true);
var chartContainer = svgContainer.append('g')
.classed('chart-container', true)
.attr('transform', "translate(" + margin.left + "," + margin.top + ")");
chartContainer.append('path')
.data(activeData)
.attr('d', lineFunc)
.attr('stroke', 'blue')
.attr('stroke-width',
.attr('fill', 'none');
Update the chart later on:
svgContainer = d3.select('#line-container').select('.svg-container')
.attr({
width: width + margin.left + margin.right,
height: height + margin.top + margin.bottom
});
chartContainer = svgContainer.select('.chart-container')
.attr('transform', "translate(" + margin.left + "," + margin.top + ")");
chartContainer.select('path')
.data(activeData)
.attr('d', lineFunc)
.attr('stroke', 'blue')
.attr('stroke-width',
.attr('fill', 'none');
Unfortunately this doesn't work, and I'm not sure why. The initial chartContainer.append('path') seem to be working (sometimes), and the chartContainer.select('path') doesn't actually return the correct item (othertimes). Might d3 be traversing my axis groups and returning one of their paths? Am I going about this the wrong way?

Answer 1

You don't show us your complete code, but from your description it sounds as if you may be selecting the wrong path. One way around this is to assign a special class to the path you want and select accordingly.
chartContainer.append("path")
.attr("class", "chart");
chartContainer.select("path.chart");
The other problem is that you can't really use .data() to update the data bound to the DOM element like you're using it. Use .datum() instead.
chartContainer.select('path')
.datum(activeData);