web-dev-qa-db-fra.com

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

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

J'ai déjà remplacé scale.linear() par 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");
d3.js
41
Vijay Kumar Singh

L'API D3 v4 est ici . Selon le changelog :

D3 4.0 fournit des styles par défaut et une syntaxe plus courte. Au lieu de d3.svg.axis et axis.orient, D3 4.0 fournit 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 suppose que vous voulez que les ticks soient en dessous de l’axe, ce qui est normalement le cas, puisque vous n’avez pas montré le orient dans vos lignes originales.

PPS: Au moment de la rédaction, la documentation liée s’applique à D3 v4. Mise en garde, lecteur: cela peut changer à tout moment (voir commentaires ci-dessous).

56
Gerardo Furtado