2012-08-01 15 views
50

Estoy tratando de establecer el rango del eje y del gráfico de 1-100.d3.js & nvd3.js - Cómo configurar el rango del eje y

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

Sin embargo, el uso de la opción no funciona. La lectura más abajo en la página de documentación vinculado anteriormente bajo axis.tickSize, la siguiente línea fue vista

Las garrapatas finales se determinan por medida de dominio de la escala asociada, y son parte del dominio trayectoria generada en lugar de una garrapata línea

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

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

Respuesta

76

Encontré una solución.

Al agregar .forceY([0,100]) a la ejemplificación del gráfico, se fuerza al eje a tomar el rango especificado en la matriz.

A partir del ejemplo aquí http://nvd3.org/livecode/#codemirrorNav

Al añadir .forceY([0,100]) a las obras de variables gráfico.

+4

Esto funciona para mí para ampliar la gama más allá del Max/Min como un gráfico de líneas, pero no para hacer el rango más pequeño que los datos. – arboc7

+6

Nota: forceY no parece funcionar en gráficos de áreas apiladas =/ –

+5

Nota: Puede usar '.forceY (val)' para forzar el mínimo y el máximo se mantendrá dinámico. –

31

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]. Por lo tanto, si configura esto en [0,100] y el dominio de sus datos es -10 en 110, el dominio será [-10,110].

Ahora bien, si quería que el dominio sea [0,100] incluso si sus datos es más grande que puede utilizar chart.yDomain([0,100]) ... pero por lo general desea que su dominio para incluir o sus datos, por lo que le recomiendo usar chart.forceY en lugar de chart.yDomain. Como verá, uno de los usos más comunes de forceY es forceY([0]) para hacer que 0 siempre esté en el dominio.

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

10

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

+1

¿Hay alguna manera de forzar el rango para el gráfico apilado, pero aún tener escalado automático cuando examina un solo conjunto de datos? p.ej. cuando hace clic en "Norteamérica" ​​en el ejemplo http://nvd3.org/examples/stackedArea.html – francisbyrne

+0

Si tiene múltiples ejes y, como en un ejemplo de múltiples gráficos, entonces tiene que hacer 'yDomain1' y' yDomain2 ', etc. Consulte el problema que se incluye aquí: https://github.com/krispo/angular-nvd3/issues/81 – bwest87

6

Si se refiere a establecer el y-domain (el rango de números que deben ser visualizados) para gráficos de áreas apiladas, esto funciona para mí:

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

he tratado como:

chart.forceY([DataMin, DataMax]); 

Datamin y Datamax necesitan calcular desde la matriz. También finde para ajustar dinámicamente puntos del eje cuando el filtro se aplica necesita para manejar personalizada, haga clic en eventos de filtro como:

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

Así gráfica se ajustará cada vez que se aplica el filtro.

+0

si solo usa los dominios y rangos predeterminados nvd3 configurará el mínimo/máximo automáticamente en función de su conjunto de datos . y volverá a calcular cuando se agreguen nuevos datos. –

0

tuve un problema similar y lo resolvió mediante la definición explícita del dominio en el yScale del eje Y, es decir

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