score:2

Accepted answer

When you do this:

svg.select("circle")

You are selecting only the first circle (if any) in the page. According to the API, select...

Selects the first element that matches the specified selector string. (emphasis mine)

That being said, you need selectAll here. But that alone will not fix the problem: you have to rebind the data. Since I don't know your data structure, the default method binds by index.

All together, it should be:

svg.selectAll("circle")
    .data(data)
    //etc...

As those circles have a class named dot, you can avoid selecting other circles using:

svg.selectAll(".dot")
    .data(data)
    //etc...

Regarding the line and the area, do the same: bind the data first and then change their d attribute:

svg.select(".area")
    .data([data])
    .attr("d", area);

svg.select(".line")
    .data([data])
    .attr("d", valueline);

Also, since you are rebinding the data, you'll have to change this:

var svg = d3.select("body").transition();

Because svg.selectAll will be a transition selection.That being said, set the transition to each individual selection after rebinding the data, removing it from the svg selection.


Related Query

More Query from same tag