Enter, Update, Exit, part4
Back to table of contents
var data = [10];
var width = 500;
var height = 500;
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var circle1 = canvas.append("circle")
.attr("cx", 50)
.attr("cy", 100)
.attr("r", 25);
var circle2 = canvas.append("circle")
.attr("cx", 100)
.attr("cy", 200)
.attr("r", 50);
// Exit example. (There are more dom elements than data elements)
// DOM elements > data elements (exit)
// two circles were selected but only one was bounded because only element in data
// notice the routine still passes through exit and colored circle blue.
var circle = canvas.selectAll("circle")
.data(data)
// update any existing circles selected and color those green.
.attr("fill", "green")
.exit()
.attr("fill", "blue");