d3 Axis Bottom mit Padding

Ich möchte zwei xAxis am unteren Rand meines Diagramms anzeigen, eines über dem anderen. Um also meine Achsen unten zu haben, habe ich .orient('bottom') sowohl auf x1Axis als auch auf x2Axis angegeben. Außerdem habe ich die transform Eigenschaft auf translate(0, height) wie unten gesehen werden:d3 Axis Bottom mit Padding

svg.append("g") 
    .attr("class", "x1 axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(x1Axis); 

for(var i = 0 ; i < x1domain.length; i++){ 
    svg.append("g") 
     .attr("class", "x2 axis") 
     .attr("transform", "translate("+ (x1.rangeBand()*i*(1/(1-x1padding))+ x1(x1domain[0])) + "," + height + ")") 
     .call(x2Axis); 
}

Wie erwartet, ich am Ende mit den beiden Achsen, wie so Übereinanderlegen:

Daher modifiziert I x1Axis des Transformations Eigenschaft auf translate(0, height-x) um die Achse ein wenig nach oben zu bewegen. Egal, der Wert von x (versuchten {x | 1 < = x < = 20}), ich war überrascht, dass das folgende Ergebnis zu immer erhalten:

Daher meine Frage ist, wie kann ich beide Achsen unten und übereinander? Das Verhalten scheint vordefiniert zu sein, um nach oben oder unten zu schneiden.

Hinweis: Wegen dieser Diskussion ignorieren Sie die Tatsache, dass ich mehrere Achsen für meine x2Axis drucke.

Quelle

2016-05-21 Philippe Hebert

Ich finde nichts Überraschendes hier auf einer der Achse, die Sie tun 'translate (0, height-x)' so dass die Achse nach oben gerückt ist. Durch die Übersetzung wird die Achse entsprechend verschoben. – Cyril

Nun, das wäre das erwartete Verhalten wenn ich 'translate (0, height-height)' schreiben würde, aber in diesem Fall 'translate (0, height-1)' ergibt das gleiche Ergebnis –

Und was ist der Wert von 'x'? Als ob es größer als "Höhe" ist, erhalten Sie eine negative 'translate'-zweite Koordinate, dh' translate (0, -200) '. – robjez

Nachdem ich herumgespielt habe, fand ich heraus, dass der Grund, warum setzen height - 1 führte in der zweiten Achse nach oben gehen. Der Grund war, dass Javascript versuchen würde, den Anfang der Zeichenfolge aufgrund des Vorhandenseins eines Minuszeichens in eine Zahl umzuwandeln, und dann zu height - 1 hinzuzufügen, was zu NaN als Wert der Eigenschaft transform führt. Daher

von

.attr("transform", "translate(0," + height-1 + ")")

habe ich es zu

.attr("transform", "translate(0," + (height-1) + ")")

die Art Casting Problem mit den zusätzlichen Klammern um height-1 zu lösen.

Quelle

2016-05-22 19:58:25

d3 Axis Bottom mit Padding

Antwort

Verwandte Themen