I am not able to understand how d3.call() works and when and where to use that. Here is the tutorial link that I'm trying to complete.
Can someone please explain specifically what this piece is doing
var xAxis = d3.svg.axis()
.scale(xScale)
.orient(bottom);
svg.append(g).call(xAxis);
I think the trick here is to understand that xAxis is a function that generates a bunch of SVG elements. In fact it is the function returned by d3.svg.axis(). The scale and orient functions are just part of the chaining syntax (read more of that here: http://alignedleft.com/tutorials/d3/chaining-methods/).
So svg.append(g) appends an SVG group element to the svg and returns a reference to itself in the form of a selection (same chain syntax at work here). When you use call on a selection you are calling the function named xAxis on the elements of the selection g. In this case you are running the axis function, xAxis, on the newly created and appended group, g.
If that still doesn't make sense, the syntax above is equivalent to:
xAxis(svg.append(g));
or:
d3.svg.axis()
.scale(xScale)
.orient(bottom)(svg.append(g));
