2013-06-12 8 views
8

Attualmente sto utilizzando NVD3 per creare alcuni grafici a linee. Mi chiedo se sia possibile far sì che le zecche dell'asse y inizino sempre da 0. Al momento inizia sempre dal valore y più basso. Ho provato a utilizzare tickValues ​​ma non voglio modificare gli altri valori. Ho anche provato ad aggiungere un punto dati con valore 0, ma questo sembra una soluzione e influenza il modo in cui il grafico appare. Qualche idea?NVD3/D3 modifica il valore minimo dell'asse y

risposta

9

Non è necessario aggiungere un punto dati "fittizio", è sufficiente regolare il dominio di input della bilancia, ad es. qualcosa come

chart.yAxis.scale().domain([0, maxValue]); 
+0

Va bene ci proverò, grazie! – Siva

+0

C'è un modo per ottenere il 'maxValue' del grafico che mostra il grafico? Sto usando il boxplot nvd3 e non sto visualizzando i valori anomali. Quindi vorrei usare quel valore massimo calcolato dal grafico come limite superiore. – Dinesh

+0

È possibile ottenere il valore massimo dai dati. –

28

La maggior parte dei grafici dispone di una forza X e di una funzione di forza che accettano una serie di valori. Si può usare in questo modo:

var chart = nv.models.lineChart(); 
    chart.forceX([0, 10]) 
    chart.forceY([-1, 1]) 

che farà sì che sul vostro asseX si sta sempre mostrando almeno 0 e 10, ma non limitare il dominio se si manipola direttamente. Cioè se si fa qualcosa di simile:

chart.yAxis.scale().domain([0, maxValue]); 

e i dati sono valori X negativi che non verrà visualizzato nel grafico perché cadranno al di fuori del dominio specificato, ma saranno, se si utilizza forceX.

+0

Sto cercando di impostare la scala ma non funziona-- ad esempio: chart.y1Axis.scale(). Domain ([0, maxValue]) .tickFormat (d3.format (', f')); – Acyra

+1

Quando si chiama update(), potrebbe essere in conflitto i valori impostati direttamente. – WolfgangCodes

+25

Piccola aggiunta alla risposta: volevo impostare solo il valore minimo su yAxis, il valore massimo dovrebbe essere impostato automaticamente. Ho scoperto che se si chiama forceY con un solo valore invece dell'array per l'impostazione [min, max], nvd3 imposta questo valore come minimo e calcola il massimo da solo. TL; DR -> Utilizzare forceY (0) per impostare il valore minimo yAxis su 0 e lasciare che il massimo calcoli per nvd3 :) – Fidel90

1

Trovo questa pagina di prova per essere molto utile quando per capire le proprietà sui grafici nvd3 (applicabile anche se non si sta usando angolare btw)

https://krispo.github.io/angular-nvd3/#/lineChart

  • Fare clic su 'estesa'
  • Fare clic sul simbolo + accanto a forceY
  • Immettere un valore come -5 e quindi aggiungerlo per vedere immediatamente l'effetto (il grafico di esempio ha già mostrato zero).
+1

È bene notare che questo non funziona per i grafici multipli. Ho picchiato la testa contro il muro cercando di capire perché questo non funziona per il mio grafico prima di aver avuto questa realizzazione –

Problemi correlati