2013-04-15 13 views
14

Ich habe vorher eine Frage zu d3 gestellt, und sie haben mir vorgeschlagen, eine ordinale Skala zu verwenden, das würde meine Probleme lösen. In der Tat hat es meine Probleme gelöst, aber ich weiß, ich bin mit einem anderen Problem stecken ...D3-Liniendiagramm, kann die Anzahl der Ticks mit einer Ordinalskala nicht bearbeitet werden?

Es zeichnet perfekt, aber meine X-Achse ist voller Text. Als Beispiel möchte ich: 1900 1904 1908 1912 ... aber ich habe: 19011902190319091951906. Wie Sie sehen können, ist dies nicht klar. (Dies ist nur ein Beispiel, wenn es nur Datumsangaben gibt, könnte ich eine andere Skala verwenden). Überall wo ich schaute, sprechen sie über axis.ticks (Nummer). Aber das funktioniert nicht. Nichts passiert und ich bekomme immer noch das gleiche Ergebnis. ich gehackt um ein Ergebnis zu weniger Ergebnisse auf der x-Achse zu erhalten:

var str = []; 
    var i = 0; 
    while(i < data.length) { 
     str.push(data[i].age); 
     i=i+8; 
    } 
    x.domain(str); 

Aber wenn ich dies tun erstellt es eine zufällige Zeile und ist es nicht perfekt mehr zeichnen. Ich weiß nicht, wie ich das lösen soll. Es ist ein einfaches Liniendiagramm, nichts Schwieriges, die einzige Schwierigkeit (für mich) ist die Ordnungsskala ...

Hoffe jemand kann mir helfen.

dies ist, wie meine x und x-Achse definiert ist:

var x = d3.scale.ordinal() 
    .rangeRoundBands([0, width-150],1); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 

ohne die while-Schleife (die fiesen Hack), hatte ich nur die folgende Zeile die x.domain definieren:

x.domain(data.map(function(d) { return d.age; })); 

Antwort

7

Werfen Sie einen Blick auf the documentation for axes, insbesondere die ticks() Funktion. Sie können es (oder tickValues()) verwenden, um zu steuern, wie viele (und was) Werte angezeigt werden sollen.

Wenn Sie mit Datumsangaben arbeiten, möchten Sie möglicherweise eine time scale anstelle der Ordinalzahl verwenden. Insbesondere ermöglicht es Ihnen, die Ticks auf eine sinnvollere Weise zu steuern, z. Geben Sie an, dass Sie alle fünf Jahre Ticks wünschen.

+0

Vielen Dank für Ihre Reaktion, ich werde mir die Dokumentation ansehen, aber wie ich bereits sagte, funktionierte die ticks() Funktion nicht. Als Beispiel habe ich Ticks() gemacht, aber trotzdem waren alle Ticks sichtbar. Und wie ich schon sagte, der 1900, 1901 war ein Beispiel, wenn es nur Daten gab, würde ich tatsächlich die Zeitskala verwenden ... –

+3

TickValues ​​() löste das Problem tatsächlich. Ich habe es versucht, aber es hat nicht funktioniert. Ich weiß nicht, was ich damals falsch gemacht habe, aber jetzt funktioniert es. Danke für die schnelle Antwort. –