I've got this snippet that I don't understand.
var data = [3, 2, 4, 1];
window.onload = async function() {
d3.select( '#canvas' )
.selectAll( 'rect' )
.data( data )
.join(
enter => {
enter.append( 'rect' )
.attr( 'x', d => d*50 )
.attr( 'width', 20 )
.attr( 'height', d=> d*50 )
.attr( 'y', 20 )
.attr( 'id', d => 'rect' + d )
.style( 'fill', 'blue' );
});
}
I understand that we're selecting the canvas and creating a rect for each datapoint. I believe we're passing a function into selection.join() that is used to join the rectangle to the data.
How and what is the 'enter' that being passed into the function passed into join? Also, how and what is the 'd' that is being passed into the other nested lambda functions?
join() has three parameters, each of which is a function that handles entering, updating and exiting elements.
Your function has a single parameter (by convention named enter) which is a selection of entering elements. You could also write it with normal syntax an not arrow function.
example:
join(
function(enter) {
...
},
function(update) {
...
},
function(exit) {
...
}
)
To update an attribute, you use attr(). This function takes two parameters:
This anccessor function can have 2 more params. Like:
attr('fill', (d,i,nodes) => ...)