Javascript library d3 call function

Question

I can’t understand how d3.call () works and when and where to use it. Here is the link I'm trying to complete.

Can someone please explain what this piece is doing?

var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); svg.append("g").call(xAxis); 

Answer 1

I think the trick here is to understand that xAxis is a function that generates a bunch of SVG elements. This is actually the function returned by d3.svg.axis() . Large-scale and oriented functions are only part of the syntax of the chain (more on this here: http://alignedleft.com/tutorials/d3/chaining-methods/ ).

So, svg.append("g") adds an SVG group element to svg and returns a link to itself as a selection (the same chain syntax works here). When you use call to highlight, you call a function called xAxis on the highlight elements g . In this case, you perform the axis function, xAxis , in the newly created and added group, g .

If this still doesn't make sense, the syntax above is equivalent:

 xAxis(svg.append("g")); 

or

 d3.svg.axis() .scale(xScale) .orient("bottom")(svg.append("g"));