Making a d3 chart update with new data

Question

I have an example of a chart on jsFiddle which has multiple groups of multiple lines. It draws successfully, but I would like to be able to transition to new sets of data.

The example should update with new data after 4 seconds. Although the chart gets called (and outputs something in the console), the lines aren't updated.

I've tried lots of variations based on existing, simpler examples, with no luck. I suspect its the nested data based on this SO answer that's confusing me even more than usual.

SO insists I have some code in the answer, so here's where I assume I need to add/change something:

  svg.transition().attr({ width: width, height: height });
  g.attr('transform', 'translate(' + margin.left +','+ margin.right + ')');

  var lines = g.selectAll("g.lines").data(function(d) { return d; });
  lines.enter().append("g").attr("class", "lines");

  lines.selectAll("path.line.imports")
      .data(function(d) { return [d.values]; })
      .enter().append("path").attr('class', 'line imports');

  lines.selectAll('path.line.imports')
      .data(function(d) { return [d.values]; })
      .transition()
      .attr("d", function(d) { return imports_line(d); });

  // repeated for path.line.exports with exports_line(d).

Answer 1

The problem is the way you're determining the top-level g element that everything is appended to:

var g = svg.enter().append('svg').append('g');

This will only be set if there is no SVG already, as you're only handling the enter selection. If it exists, g will be empty and therefore nothing will happen. To fix, select the g explicitly afterwards:

var g = svg.enter().append('svg').append('g').attr("class", "main");
g = svg.select("g.main");

Complete demo here.