d3 data join

d3DataJoin.md

Selection

p = d3.selectAll("p")
p // [Array[0]]
p[0] // []
p.data() // []

Data-join

p = p.data([1,2,3])
p // [Array[3]]
p[0] // [undefined, undefined, undefined]
p.data() // [undefined, undefined, undefined]
p.enter() // [Array[3]]
p.enter()[0] // [Object, Object, Object]

Append

p.enter()append("p").text(function(d) { return d }) // 3 new paragraphs on the DOM
p // [Array[3]]
p[0] // [<p>1</p>, <p>2</p>, <p>3</p>]
p.data() // [1, 2, 3]
p.enter() // [Array[3]]
p.enter()[0] // [Object, Object, Object]

Update

p.data([4,5,6])
p.data() // [4, 5, 6]
p.transition().text(function(d){ return d }) // the 3 paragraphs are updated

Written with StackEdit.