What is 'd3.svg.axis()' in d3 version 4?

Question

How can I replace below lines with the new version of D3 API?

I have already replaced scale.linear() with scaleLinear()

var xRa         


        

Answer 1

The D3 v4 API is here. According to the changelog:

D3 4.0 provides default styles and shorter syntax. In place of d3.svg.axis and axis.orient, D3 4.0 now provides four constructors for each orientation: d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft.

Therefore, those lines should be:

var xAxis = d3.axisBottom(xRange).tickFormat(function(d){ return d.x;});
var yAxis = d3.axisLeft(yRange);

---

PS: I'm assuming that you want the ticks to be below the axis, which is normally the case, since you didn't show the orient in your original lines.

PPS: At the time of the writing the linked documentation applies to D3 v4. Caveat, lector: that can change at any time (see comments below).