score:1

Accepted answer

What you already have looks like a good start to me. The basic pattern is this.

  • Render a default selection when the CSV is loaded.
  • When the selection changes, filter the data to display like you already do. You might want to keep a reference to the currently selected data somewhere. Remember that your filter function can be something arbitrarily complex, i.e. you can check all the conditions you like.
  • Select all the train paths and pass in the new data. You will need to provide a key function (second argument to .data(), see here) to make sure that data and lines are matched correctly.
  • Handle the enter/update/exit selections. Start without transitions first and then add them.

How exactly you want to do the transitions depends on you, but you could have for example enter and exit selection fading in and out like so.

selection.enter().append("path").attr("opacity", 0).transition().attr("opacity", 1);
selection.exit().transition().attr("opacity", 0).remove();

Related Query