Qu'est-ce que 'd3.svg.axis ()' dans d3 version 4?

Question

Comment remplacer les lignes ci-dessous par la nouvelle version de l'API D3?

J'ai déjà remplacé scale.linear() avec scaleLinear()

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

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

Les lignes ci-dessous doivent être remplacées conformément à la nouvelle API:

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

Answer 1

La D3 v4 API est ici. Selon le changelog:

D3 4.0 fournit des styles par défaut et syntaxe plus courte. En lieu et place de d3.svg.l'axe et l'axe.orient, D3 4.0 offre maintenant quatre constructeurs pour chaque orientation: d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft.

Par conséquent, ces lignes doivent être:

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

---

PS: je suis en supposant que vous voulez que les tiques puissent être au-dessous de l'axe, qui est normalement le cas, puisque vous n'avez pas d'afficher le orient dans vos lignes originales.

PPS: Au moment de la rédaction de la liés documentation s'applique à D3 v4. Mise en garde, lector: qui peut changer à tout moment (voir les commentaires ci-dessous).