9 Object Constancy
9.2 No object constancy
|
Transitions Off On
Add bar Remove bar (right) Remove bar (left) |
Of note:
Rather than smoothly transitioning off to the left, all bars are resized when “Remove bar (left)” is clicked
When "Remove bar (right) is clicked, the bar on the right immediately disappears, and then the remaining bars transition to their new places to the right.
Standalone version: no_object_constancy.html
9.3 Object constancy
|
Transitions Off On
Add bar Remove bar (right) Remove bar (left) |
Of note:
- Bars now smoothly transition off to the left and right
Standalone version: object_constancy.html
9.3.1 Practice joining data by key
Open the JavaScript Console
Try the following:
- Create an svg with four text elements:
const dataset = [{key: 12, x: 163, y: 200},
key: 14, x: 206, y: 304},
{key: 16, x: 452, y: 152},
{key: 18, x: 321, y: 254}];
{
const svg = d3.select("#key").append("svg")
.attr("width", "600").attr("height", "400");
.append("rect").attr("width", "600")
svg.attr("height", "400").attr("fill", "aliceblue");
.selectAll("text")
svg.data(dataset, d => d.key)
.enter()
.append("text")
.attr("x", d => d.x)
.attr("y", d => d.y)
.text(d => `key: ${d.key}`);
- Bind a new dataset by key:
const svg = d3.select("#key").select("svg");
const dataset = [{key: 12, x: 100, y: 200},
key: 16, x: 250, y: 300}];
{
.selectAll("text")
svg.data(dataset, d => d.key)
.exit()
.remove();
Then:
.selectAll("text")
svg.attr("x", d => d.x)
.attr("y", d => d.y);
- And another one:
const svg = d3.select("#key").select("svg");
const dataset = [{key: 23, x: 300, y: 150},
key: 5, x: 450, y: 270},
{key: 16, x: 200, y: 250}];
{
const databind = svg.selectAll("text")
.data(dataset, d => d.key);
databind .enter()
.append("text")
.merge(databind)
.attr("x", d => d.x)
.attr("y", d => d.y)
.text(d => `key: ${d.key}`);
.exit().remove(); databind
- Experiment with other data binds.