2014-04-05 15 views
5

Sto utilizzando dc.js per creare un grafico serie. Non sono in grado di impostare l'inizio e la fine dell'asse Y come desiderato. Qualcuno può suggerire come raggiungere un asse Y che parte da 90 invece di 0? Idealmente, vorrei impostare l'inizio dell'asse Y come minimo del valore dei dati e terminare come il massimo del valore dei dati.Impostazione del campo dell'asse Y nel grafico delle serie CC

Codice:

d3.csv("data/compareData.txt", function(data) { 

    ndx = crossfilter(data); 
    runDimension = ndx.dimension(function(d) {return [+d3.time.format.iso.parse(d.timestamp), +d.meterid]; }); 
    runGroup = runDimension.group().reduceSum(function(d) { return +d.voltagemagnitude*100; }); 

    testChart 
    .width(768) 
    .height(480) 
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); }) 
    .x(d3.time.scale().domain([1366621166000, 1366621179983])) 
    .y(d3.scale.linear().domain([90, 100])) 
    .brushOn(false) 
    .yAxisLabel("Measured Speed km/s") 
    .xAxisLabel("Run") 
    .elasticY(true) 
    .dimension(runDimension) 
    .group(runGroup) 
    .mouseZoomable(false) 
    .seriesAccessor(function(d) {return "PMU: " + d.key[1];}) 
    .keyAccessor(function(d) {return +d.key[0];}) 
    .valueAccessor(function(d) {return +d.value;}) 
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70)); 
    testChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);}); 
    testChart.margins().left += 40; 

    dc.renderAll(); 

}); 

risposta

3

Penso che si desidera qualcosa di simile:

var runMin = +runDimension.bottom(1)[0].voltagemagnitude*100; 
var runMax = +runDimension.top(1)[0].voltagemagnitude*100; 

Quindi è possibile impostare il dominio per il vostro asse y:

.y(d3.scale.linear().domain([runMin, runMax])) 

noti che bottom e top restituisce una riga di dati, quindi è necessario estrarre il valore da esso e trasformarlo nello stesso modo che fai per reduceSum.

3

Avevo un problema simile e bastava rimuovere .yAxisPadding. Non è esattamente una risposta al tuo problema, ma spero di usarlo per gli altri che leggono questo post.

+0

Ha funzionato! Ho dovuto impostare .yAxisPadding (-1) per farlo visualizzare. Ma la tua risposta ha almeno mostrato le mie zecche sull'asse y. –

+0

@MrWiLofDoom: Grazie! –

Problemi correlati