Javascript D3 nested lambda function confusion

user_15696085 0
Viewed 44

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?

d3.js lambda javascript
1 Answers

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
user_76228320
Related