CODEWITHSUNDEEP
transitiond3.js
vivianh
vivianh

Reputation: 155

transitioning lines in d3.js

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));
    }

Thanks for any responses! :)

Upvotes: 3

Views: 2849

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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)
...

Upvotes: 4

Related Questions