D3 functions - Vincentvanleeuwen/frontend-data GitHub Wiki

select()

Select is used to select an svg element within your page. For instance you can use select('.lolly') to select the element with the class 'lolly'. You can also try select('#lolly') to select id's.

selectAll()

If you'd have a list of elements you want to select, you can just use selectAll('.lollies').

data()

By calling data after a selectAll, you can immediately push all your data to your elements. It'll loop over each data entry, and create an element for each entry.

join()

With join() you can easily specify you enter(), update() and exit() functions. For instance:

 selectAll('.lollies').data(lollies).join(
    enter => enter.append('circle').attr('fill', 'red')
    update => update.attr('fill', 'red')
    exit => exit.remove();
 )

You can also add transitions to join like this:

 let t = svg.transition().duration(500)
 selectAll('.lollies').data(lollies).join(
    enter => enter.append('circle').attr('fill', 'red')
                  .call(enter => enter.transition(t))
    update => update.attr('fill', 'red')
                    .call(update => update.transition(t))
    exit => exit.attr('fill', 'brown')
                .call(exit => exit.transition(t))
                  .remove();
 )

append()

With append() you can push new children to an element. For instance if you have a container, you could say

container.append('g')

This creates the element and pushes it into the container.

max()

You can calculate how many items there are in your array by using max() around your data set.

attr()

In attributes you can specify a lot of different things. For instance if you want to change the radius of the circle you just made? you can do svg.attr('r', 5) to directly change the radius on that element.

call()

call(), for instance, is used to apply the axis's to the container. selection.call() always returns the selected values instead of call's returned value. This means you can easily chain it with other functions.