Javascript Girl
  1. Javascript Girl
  3. Conversion des nombres sur l'axe des y à la chaîne avec K pour mille d3.js
Intereting Posts
Vérifiez si un noeud DOM se trouve dans un Iframe Fonction JavaScript Push Object () Qu'est-ce que $ (selector) signifie dans jQuery? JqPlot marques personnalisées JQuery post () avec sérigraphie et données supplémentaires Où puis-je trouver un yacc gammar pour ECMAscript / Actionscript / Javascript Pourquoi les points-virgules ne sont-ils pas utilisés après les déclarations if / else? Comment détecter le son sur la page Web avec JavaScript dans PhantomJS? Dynamic SpeedMeter javascript ou jquery plugin Réécrire l'URL HTTP vers HTTPS en utilisant l'expression régulière et le javascript Pourquoi numéro + chaîne une chaîne dans javascript? Ajout de chiffres à partir d'un nombre, en utilisant la récursivité – javascript Vérifiez si l'élément est visible à l'écran Créer une capture d'écran de la page Web à l'aide de html2canvas (incapable de l'initialiser correctement) JQuery.data ne fonctionne plus avec la fenêtre?

Conversion des nombres sur l'axe des y à la chaîne avec K pour mille d3.js

J'utilise les diagrammes d3.js pour tracer l'axe y et l'axe des x .. il fonctionne bien … mais les valeurs dans l'axe y vous pouvez indiquer la portée est de 0 à 10000 et je veux si le nombre est supérieur à mille, il viendra Avec K dire si le nombre est 1000, il affichera 1K, pour 15000 il apparaîtra sur les tiques de l'axe y 15K

Comment faire ça … je ne suis pas capable de gérer les fonctions de votre système et de votre gamme pour les valeurs de chaîne … 

var y = d3.scale.linear().range([ height, 0 ]); y.domain([0, //d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.count; }); }), d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.count; }); }) ]);

Comment faire, y a-t-il un moyen de faire … aidez-vous

À partir de la référence de l'API , on voit d3.formatPrefix 

 var prefix = d3.formatPrefix(1.21e9); console.log(prefix.symbol); // "G" console.log(prefix.scale(1.21e9)); // 1.21

Nous pouvons l'utiliser de cette façon 

 var yAxis = d3.svg.axis() .scale(y) .ticks(5) .tickFormat(function (d) { var prefix = d3.formatPrefix(d); return prefix.scale(d) + prefix.symbol; }) .orient("left");

Cependant, dans le cas où cela est exactement ce que vous voulez dire, nous pouvons simplifier l'utilisation de d3.format("s") 

 var yAxis = d3.svg.axis() .scale(y) .ticks(5) .tickFormat(d3.format("s")) .orient("left");

Vous recherchez tickFormat sur l'objet axe. 

 var svgContainer = d3.select("body").append("svg") .attr("width", 800) .attr("height", 100); //Create the Scale we will use for the Axis var axisScale = d3.scale.linear() .domain([0, 2000]) .range([0, 600]); //Create the Axis var xAxis = d3.svg.axis() .scale(axisScale) .tickFormat(function (d) { if ((d / 1000) >= 1) { d = d / 1000 + "K"; } return d; }); var xAxisGroup = svgContainer.append("g") .call(xAxis);

Vérifiez ici: http://jsfiddle.net/3CmV6/2/

Cela vous donnera ce que vous voulez, mais je recommande de vérifier la suggestion de robermorales pour utiliser d3.format('s') .

C'est ce que j'ai mis en œuvre 

 var yAxis = d3.svg.axis().scale(y).ticks(5). tickFormat(function (d) { var array = ['','k','M','G','T','P']; var i=0; while (d > 1000) { i++; d = d/1000; } d = d+' '+array[i]; return d;}). orient("left");

Il fonctionnera pour encore plus de mille …

Si vous souhaitez modifier les étiquettes sur les tiques, vous pouvez utiliser la fonction tickFormat .

Par exemple, votre fonction d'axe y ressemblerait à ceci: 

 var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickFormat(function(tickVal) { return tickVal >= 1000 ? tickVal/1000 + "K" : tickVal; });

Ensuite, il vous suffit de l'appeler. En supposant que vous avez une variable appelée svg qui fait référence à votre diagramme svg: 

 svg.append("g) .call(yAxis);

Pour rendre les choses un peu plus claires, j'ai créé ce jsfiddle basé sur ce didacticiel , adapté pour afficher les étiquettes de cotation de l' axe de la façon que vous décrivez ci-dessus si la valeur est supérieure ou égale à 1000. Si vous l'exécutez quelques fois, vous verrez Comment les différentes valeurs d'axe sont traitées.