Javascript D3 nested lambda function confusion-CodePudding

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?

CodePudding user response：

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:

Attribute Name - For example, "height" to set the height of the SVG.
Value or An accessor function. - For example "10" to set the height to 10 or an accessor function that sets the value per data point based on the data (by conventioned named d).

This anccessor function can have 2 more params. Like:

attr('fill', (d,i,nodes) => ...)

the index of the current item (by convention i), and
the group of nodes in the selection