d3 axes: help me understand the very basics

Community Help
2

When you call d3.axisBottom(x), you are making a new, independent “axis maker” each time.So what you want to do is make an axis maker, customize it, and then pass it to .call(). Like this:

const xAxis = d3.axisBottom(x) // this makes a new axis-maker
  .tick(20, "s"); // this customizes it, and then returns the axis-maker

svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(xAxis); // here I use the axis-maker I made and customized above

What .call() does is call the given function with the selection you have (here, the g element you just made). That means that the return value of d3.axisBottom is actually a kind of function. It is just one that has been given extra properties and methods.

1 Like