Using D3 transition method with data for scatter plot

Question

So I\'m new to D3 and have little exp with JavaScript in general. So I have been following some tutorials am currently using source code that creates a basic scatter plot.

Answer 1

First, before addressing the transition issue, you need to refactor things a bit. You're going to want to call an update(newData) function every time your data changes, and have this function do all the necessary updates.

This tutorial by mbostock describes exactly the "general update pattern" you'll need.

Parts II and III then go on to explaining how to work transitions into this pattern.

They're very short. And once you understand them, you'll have just about all the info you need to do this.

Answer 2

I guess you just have to specify .transition() function after .data(newData) function

In the following example Y2 is a node in a JSON file, where Y1 was the previous one used

Example:

//Creating the button
var button = d3.select("body")
.append("input")
.attr("type","button")
.attr("value", "A button");

//Transitioning process
button.on("click", function()
{   circles
    .data(data.Y2)
    .transition()
    .attr("cx", function(d)
    {
        return d[0];
    }
    )
    .attr("cy", 300);
}
)