d3.js & nvd3.js - comment définir la plage de l'axe des y
J'essaie de définir la plage d'axe y du graphique de 1-100.
A consulté la documentation de L'API et trouvé une solution possible avec axis.tickValues comme on le voit ici https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues
Cependant, l'utilisation de l'option ne fonctionne pas. Lecture plus bas sur la page de documentation liée ci - dessus sous axis.tickSize, la ligne suivante a été repérée
Les ticks de fin sont déterminés par le domaine de l'échelle associée étendue, et font partie du domaine de chemin généré plutôt qu'une ligne de tick
Donc, je prends le réglage du min et du max de la plage ne peut pas être fait via L'option Axis.
Des idées sur l'endroit où je peux spécifier la plage?
6 réponses
Trouvé une solution.
L'ajout de .forceY([0,100]) à l'instanciation du graphique force l'axe à prendre la plage spécifiée dans le tableau.
De l'exemple ici http://nvd3.org/livecode/#codemirrorNav
L'ajout de .forceY([0,100]) à la variable graphique fonctionne.
Comme le nom devrait Le suggérer, cela ajoute les valeurs du tableau à votre domaine y, Il ne définit pas le domaine y sur [0,100]. Donc, si vous définissez ceci à [0,100] et que le domaine de vos données est -10 à 110, le domaine sera [-10,110].
Maintenant, si vous voulez que le domaine soit [0,100] même si vos données sont plus grandes, Vous pouvez utiliser chart.yDomain([0,100]) ... Mais généralement, vous voulez que votre domaine inclue ou vos données, donc je recommande fortement d'utiliser chart.forceY au lieu de chart.yDomain. Comme vous le verrez, une des utilisations les plus courantes pour forceY est forceY([0]) pour faire 0 toujours dans le domaine.
J'espère que cela vous aidera à comprendre ce que fait réellement 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.
Pour les graphiques en zones empilées, .forceY([0,100]) ne fonctionne pas.
Utiliser à la place .yDomain([0,100])
Si vous voulez dire définir le y-domain (la plage de nombres qui doit être affichée) pour les graphiques en zones empilées, cela fonctionne pour moi:
nv.models.stackedAreaChart()
.x(function(d) {...})
.y(function(d) {...})
.yDomain([0, maxY])
...
J'ai essayé comme:
chart.forceY([DataMin, DataMax]);
Datamin et Datamax doivent calculer à partir du tableau. Aussi pour ajuster dynamiquement les points d'axe lorsque le filtre s'applique, vous devez gérer les événements de clic personnalisés du filtre comme:
$('g.nv-series').click(function() {
//Calculate DataMin, DataMax from the data array
chart.forceY([DataMin, DataMax]);
});
Donc graph ajustera chaque fois que le filtre s'applique.
J'ai eu un problème similaire et l'ai résolu en définissant explicitement le domaine dans l'échelle y de l'axe yAxis, c'est-à-dire
var yscale = d3.scale.linear()
.domain([0,100])
.range([250, 0]);
var yAxis = d3.svg.axis()
.scale(yscale);