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. Now my question is how do I use the transition() method to moves the circles around when I add more datasets? I want to be able to set up buttons and when a user presses them, it activates the transition() method with the corresponding dataset. The tutorial I read on transitions only showed a transition on a single rectangle and did it manually, without data, and not with multiple items

//Width and height
var w = 900;
var h = 600;
var padding = 30;


//Static dataset
var dataset = [
    [50, 30], [300, 75], [123, 98], [70, 40], [247, 556],
    [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
    [600, 150]
];          

//Create scale functions
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([h - padding, padding]);

var rScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([4, 4]);

//Define X axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(5);

//Define Y axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);


//Create circles
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(d[0]);
    })
    .attr("cy", function(d) {
        return yScale(d[1]);
    })
    .attr("r", function(d) {
        return rScale(d[1]);
    })
    .attr("fill", "blue");

//Create X axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

//Create Y axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

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