2014-04-05 2 views
5

Ich verwende dc.js, um ein Seriendiagramm zu erstellen. Ich kann den Anfang und das Ende der Y-Achse nicht wie gewünscht einstellen. Kann jemand bitte vorschlagen, wie man eine Y-Achse erreicht, die von 90 statt 0 beginnt? Idealerweise würde ich den Y-Achsenstart als Minimum des Datenwerts festlegen und als das Maximum des Datenwerts enden.Einstellung des Y-Achsenbereichs in DC-Serie-Diagramm

Code:

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(); 

}); 

Antwort

3

Ich glaube, Sie so etwas wie dies wollen:

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

Dann können Sie die Domain für Ihre y-Achse gesetzt:

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

Beachten Sie, dass bottom und top geben Sie eine Datenzeile zurück, also müssen Sie den Wert daraus extrahieren und in dasselbe umwandeln So machen Sie das für reduceSum.

3

Ich hatte ein ähnliches Problem und alles, was es dauerte, war das Entfernen der .yAxisPadding. Nicht gerade eine Antwort auf Ihr Problem, aber hoffentlich für andere, die diesen Beitrag lesen.

+0

Arbeitete! Ich musste .yAxisPadding (-1) setzen, um es zu zeigen. Aber Ihre Antwort hat zumindest meine y-Achse Ticks zu zeigen. –

+0

@MrWiLofDoom: Danke! –

Verwandte Themen