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

d3.js

d3.js Problem Overview


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

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

var xRange = d3.scaleLinear()
    .domain([OIResults.min,OIResults.max]).range([40, 360]);
 
var yRange = d3.scaleLinear()
    .domain(y_domain).range([360, 40]);

Below Lines need to be replaced according to the new API:

var xAxis = d3.svg.axis().scale(xRange).tickFormat(function(d) { return d.x;});
var yAxis = d3.svg.axis().scale(yRange).orient("left");

d3.js Solutions


Solution 1 - d3.js

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).

Categories

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVijay Kumar SinghView Question on Stackoverflow
Solution 1 - d3.jsGerardo FurtadoView Answer on Stackoverflow