javascript - d3.js & nvd3.js-Cómo configurar el rango del eje y

Question

Estoy tratando de establecer el rango del eje y del gráfico de 1-100.

Consultamos la documentación API y encontramos una posible solución con axis.tickValues ​​como se ve aquí https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues

Sin embargo, usar la opción no funciona. Leyendo más abajo en la página de documentación vinculada arriba en axis.tickSize, se vio la siguiente línea

Las marcas finales se determinan por la extensión de dominio de la escala asociada, y son parte del dominio de ruta generado en lugar de una línea marcada

Así que lo tomo estableciendo que el mínimo y máximo del rango no se puede hacer a través de la opción Eje.

¿Alguna idea sobre dónde puedo especificar el rango?

Answer 1

Como el nombre debería sugerir, esto agrega los valores en la matriz a su dominio y , no establece el dominio y en [0,100] . Entonces, si configura esto a [0,100] y el dominio de sus datos es -10 a 110 , el dominio será [-10,110] .

Ahora, si desea que el dominio sea [0,100] incluso si sus datos son más grandes, puede usar chart.yDomain([0,100]) ... PERO normalmente desea incluir su dominio o sus datos, por lo que le recomiendo usar el gráfico. forceY en lugar de chart.yDomain . Como verá, uno de los usos más comunes para forceY es forceY([0]) para hacer que 0 siempre esté en el dominio.

Espero que eso te ayude a entender qué es lo que realmente está haciendo la función, y arboc7, esto debería explicar por qué no funciona al hacer que el rango sea más pequeño que el conjunto de datos.

Answer 2

Encontré una solución.

Agregar .forceY([0,100]) a la .forceY([0,100]) de instancias del gráfico fuerza al eje a tomar el rango especificado en el conjunto.

Del ejemplo aquí http://nvd3.org/livecode/#codemirrorNav

Agregar .forceY([0,100]) a la variable de gráfico funciona.

Answer 3

He intentado como:

chart.forceY([DataMin, DataMax]);

Datamin y Datamax necesitan calcular desde la matriz. También para ajustar dinámicamente los puntos de los ejes cuando se aplica el filtro, es necesario manejar eventos de click de filtros personalizados como:

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

Entonces el gráfico se ajustará cada vez que se aplique el filtro.

Answer 4

Para gráficos de áreas apiladas, .forceY([0,100]) no funciona. Use en .yDomain([0,100]) lugar .yDomain([0,100])

Answer 5

Si quiere decir configurar el y-domain (el rango de números que debería mostrarse) para gráficos de áreas apiladas, esto funciona para mí:

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

Answer 6

Tuve un problema similar y lo resolví definiendo explícitamente el dominio en yScale de yAxis, es decir,

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