web-dev-qa-db-fra.com

d3.js & nvd3.js - Comment définir la plage de l'axe des y

J'essaie de définir la plage d'ordonnée du graphique de 1-100.

Consultez la documentation de l'API et trouvez une solution possible avec axis.tickValues, comme indiqué ici https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues ​​

Cependant, l'utilisation de l'option ne fonctionne pas. En lisant plus bas la page de documentation liée ci-dessus sous axis.tickSize, la ligne suivante a été repérée

Les graduations de fin sont déterminées par l'étendue du domaine de l'échelle associée, et font partie du domaine de chemin généré plutôt que d'une ligne à cocher

Je prends donc le réglage des min et max de la plage ne peut pas être fait via l'option Axis.

Des idées sur où je peux spécifier la gamme?

javascriptd3.jsnvd3.js
54
Viet

Trouvé une solution.

Ajouter .forceY([0,100]) à l'instanciation du graphique oblige l'axe à prendre la plage spécifiée dans le tableau.

A partir de l'exemple ici http://nvd3.org/livecode/#codemirrorNav

L’ajout de .forceY([0,100]) à la variable de graphique fonctionne.

79
Viet

Comme le nom l’indique, cela ajoute les valeurs du tableau à votre domaine y, mais ne définit pas le domaine y à [0,100]. Donc, si vous définissez ceci sur [0,100] et que le domaine de vos données est -10 à 110, le domaine sera [-10,110]. 

Maintenant, si vous vouliez que le domaine soit [0,100], même si vos données sont plus volumineuses, vous pouvez utiliser chart.yDomain([0,100]) ... MAIS, en règle générale, vous souhaitez que votre domaine soit inclus ou vos données. Je vous recommande donc fortement d'utiliser chart.forceY au lieu de chart.yDomain. Comme vous le verrez, l'une des utilisations les plus courantes de forceY est forceY([0]) pour que 0 soit toujours dans le domaine.

J'espère que cela vous aidera à comprendre ce que fait la fonction, et arboc7, cela devrait expliquer pourquoi cela ne fonctionne pas pour rendre la plage plus petite que celle de l'ensemble de données.

32
Bob Monteverde

.forceY([0,100]) ne fonctionne pas pour les graphiques à aires empilées. Utilisez plutôt .yDomain([0,100])

10
Pierre-Yves V.

Si vous voulez définir le y-domain (la plage de nombres à afficher) pour les graphiques à aires empilées, cela fonctionne pour moi:

nv.models.stackedAreaChart()
  .x(function(d) {...})
  .y(function(d) {...})
  .yDomain([0, maxY])
...
7
sepans

J'ai eu un problème similaire et je l'ai résolu en définissant explicitement le domaine dans l'échelle y de l'échelle yAxis, c'est-à-dire 

var yscale = d3.scale.linear()
                     .domain([0,100])
                     .range([250, 0]);
var yAxis = d3.svg.axis()
                  .scale(yscale);
0
myrcutio

J'ai essayé comme:

chart.forceY([DataMin, DataMax]);

Datamin et Datamax doivent être calculés à partir d'un tableau. De plus, afin de pouvoir ajuster dynamiquement les points d’axe lorsque le filtre s’applique, il est nécessaire de gérer de manière personnalisée les événements de clic du filtre tels que:

$('g.nv-series').click(function() {
   //Calculate DataMin, DataMax from the data array                    
   chart.forceY([DataMin, DataMax]);                        
});

Ainsi, le graphique ajustera chaque fois que le filtre s’applique.

0
Dijo