transitioning lines in d3.js

Question

Sorry if this question seems stupid, but it's stumped me for a couple days, so I would really appreciate any simple input from anyone! :) I'm trying to construct a line graph in d3.js that transitions between different datasets. However, whenever I hit the transition function, it selects the original line on the graph, AND the axes of the graph, and transitions all of it. I tried to do selectAll("svg:path") instead of selectAll("path") but it just returned a DOMException 12, indicating that the selection didn't exist. ``` //beginning of code to append axis to graph graph.append("svg:g").attr("class", "x axis") //draws the original line on the graph graph.append("svg:path").attr("d", line(dataset1)); //line function var line = d3.svg.line() .x(function(d) {return x(d.age);}) .y(function(d) {return y(d.freq);}) .interpolate("basis"); //transition function function transition(newData) { graph.selectAll("path") .data(newData) .transition() .duration(2000) .attr("d", line(newData)); } ```…

Accepted Answer

Just give the thing you want to change a unique class/identifier, e.g.

```
graph.append("svg:path").attr("d", line(dataset1)).classed("line", true);
...
graph.selectAll("path.line")
        .data(newData)
...
```

transitioning lines in d3.js

Solution

Problem