Utilsd3.selection.attrd3.selection moduled3 documentation templated3.timeParse(specifier)d3.selection.removed3.selection.merged3.selection.insertd3.selection.datad3.selection.enterThinking with Joinsd3.selection.append(type)d3.selection.selectAlld3.selection.styled3.selection.attrd3.selection.appendd3.selection.selectd3.selectAll docd3.select()d3-selection Doc Introd3.selection()D3 Documentation on Observable
d3.selection.exit()
{
const body = html`<div></div>`
const div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(d => d);
return body
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(d => d);
div = div.data([1, 2, 4, 8, 16, 32], d => d);
console.log(div); // what the new data binding look like (has _enter, _exit, _group)
console.log(body) // data has been binded new, but body has not changed yet
return body
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(d => d);
div = div.data([1, 2, 4, 8, 16, 32], d => d);
console.log(div); // what the new data binding look like (has _enter, _exit, _group)
div.enter().append("div").text(d => d);
console.log(body) // check how many element actually exist before remove()
return body
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(d => d);
div = div.data([1, 2, 4, 8, 16, 32], d => d);
div.enter().append("div").text(d => d);
console.log(div.exit()) // select exit element from old data
div.exit().remove();
console.log(body); // how many elements remaining after removal
return body
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.join("div") // use joint("div") to replace enter().append("div")
.text(d => d);
div = div.data([1, 2, 4, 8, 16, 32], d => d);
div
.join("div") // use joint("div") to replace enter().append("div")
.text(d => d);
// div.exit().remove(); // no longer needed
return body
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.join("div") // use joint("div") to replace enter().append("div")
.text(d => d);
div = div.data([1, 2, 4, 8, 16, 32], (d, i, nodes) => {
console.log("d: ", d); // d for elements, are old datum each; d for data, are new datum each
// console.log("i: ", i); // idx for selection and then for data
// console.log("nodes: ", nodes); // nodes for elements, are all elements in an array; nodes for data, are all new data in an array
return d;
});
div
.join("div") // use joint("div") to replace enter().append("div")
.text(d => d);
// div.exit().remove(); // no longer needed
return body
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.join("div") // use joint("div") to replace enter().append("div")
.text(d => d);
div = div.data([1, 2, 4, 8, 16, 32]);
// see binding diff without kety function (d => d), this is wrong way to do it
console.log(div); // _enter is empty, _exit is empty too
console.log(body) // data has been binded new, but body has not changed yet
// div
// .join("div") // use joint("div") to replace enter().append("div")
// .text(d => d);
// div.exit().remove(); // no longer needed
return body
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
// .enter().append("div")
// .text(d => d);
// div = div.data([1, 2, 4, 8, 16, 32], d => d);
// div.enter().append("div").text(d => d);
// div.exit().remove();
return div
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(d => d);
// div = div.data([1, 2, 4, 8, 16, 32], d => d);
// div.enter().append("div").text(d => d);
// div.exit().remove();
return div
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(d => d);
// div.data([1, 2, 4, 8, 16, 32], d => d) // make a huge difference, don't do it
div = div.data([1, 2, 4, 8, 16, 32], d => d)
// div
// .enter()
// .append("div")
// .text(d => d);
// div
// .exit()
// .remove();
return div
// _groups => the intersection of two circles
// _groups: Array(1) [
// 0: Array(6) [empty × 2, HTMLDivElement, HTMLDivElement, HTMLDivElement, empty]
// ]
// _enter => the left part of new data
// _exit => the right part of the old data/elements
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(d => d);
div.data([1, 2, 4, 8, 16, 32], d => d) // make a huge difference, this is a wrong way of doing it !!!!!
// div = div.data([1, 2, 4, 8, 16, 32], d => d)
// div
.enter()
.append("div")
.text(d => d)
div
.exit()
.remove();
return body;
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(d => d);
// div.data([1, 2, 4, 8, 16, 32], d => d) // make a huge difference, don't do it
div = div.data([1, 2, 4, 8, 16, 32], d => d)
div
.enter()
.append("div")
.text(d => d); // still return _group, _enter (still EnterNodes), _exit (divElements)
// div
// .exit()
// .remove();
return div
// _groups => the intersection of two circles
// _groups: Array(1) [
// 0: Array(6) [empty × 2, HTMLDivElement, HTMLDivElement, HTMLDivElement, empty]
// ]
// _enter => the left part of new data
// _exit => the right part of the old data/elements
}
{
const body = html`<div></div>`
let div = d3.select(body)
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(d => d);
// div.data([1, 2, 4, 8, 16, 32], d => d) // make a huge difference, don't do it
div = div.data([1, 2, 4, 8, 16, 32], d => d)
div
.enter()
.append("div")
.text(d => d); // still return _group, _enter (still EnterNodes), _exit (divElements)
div
.exit()
.remove(); // no difference from previous steps
return div
// _groups => the intersection of two circles
// _groups: Array(1) [
// 0: Array(6) [empty × 2, HTMLDivElement, HTMLDivElement, HTMLDivElement, empty]
// ]
// _enter => the left part of new data
// _exit => the right part of the old data/elements
}
import { d3 } from "@embracelife/tutorial-utilities"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
