it-swarm.com.de

Angepasste Tickgröße auf der Achse (d3js)

Ich erstelle ein svg x-y-Diagramm in d3.js. Können abhängig von tickValue Ticks unterschiedlicher Länge erstellt werden?

Ich habe meine eigene tickFormat-Funktion myTickFormat erstellt und verwende das in .tickFormat([format]), und das funktioniert gut, weil erwartet wird, dass [format] eine Funktion ist. Es ist jedoch nicht möglich, dasselbe mit .innerTickSize([size]) zu tun, das eine Nummer erwartet. 

Z.B. Wenn ich das Häkchen bei Wert 70 verlängern möchte, möchte ich Folgendes tun:

var myTickSize = function(d) {
    if (d === 70) { return 20;}
    return 6;
};

Wenn ich jedoch myTickSize als Argument für .innerTickSize() verwende:

var yScale = d3.scale.linear();
var yAxis = d3.svg.axis()
               .scale(yScale).orient("left")
               .innerTickSize(myTickSize);

Ich bekomme einen Error: Ungültiger Wert für das Attribut x2 = "NaN" error für jeden Tick.

10
swenedo

Die tickSize-Funktion kann nur eine Zahl als Argument akzeptieren, keine Funktion, es gibt jedoch andere Lösungen.

Der einfachste Ansatz? Markieren Sie nach dem Zeichnen der Achse alle Teilstrichlinien und ändern Sie ihre Größe entsprechend ihrem Datenwert. Denken Sie daran, dass Sie dies auch tun müssen, nachdem jede Achse neu gezeichnet wurde.

Beispiel:
https://jsfiddle.net/zUj3E/1/

Schlüsselcode:

d3.selectAll("g.y.axis g.tick line")
    .attr("x2", function(d){
    //d for the tick line is the value
    //of that tick 
    //(a number between 0 and 1, in this case)
       if ( (10*d)%2 ) //if it's an even multiple of 10%
           return 10;
       else
           return 4;
    });

Beachten Sie, dass die Markierungen bei den maximalen und minimalen Werten ebenfalls als Teil desselben <path> wie die Achsenlinie gezeichnet werden. Eine Verkürzung dieser Werte hat also keine großen Auswirkungen. Wenn Ihnen diese mangelnde Kontrolle nicht gefällt, geben Sie an, dass die "äußeren" Ticks beim Einrichten der Achse null Länge haben. Dadurch werden die Ecken des Pfads deaktiviert, aber die äußeren Hilfsstriche haben immer noch Linien, die Sie genauso wie die anderen Hilfsstriche steuern können:

var axis = d3.svg.axis()
    .tickSize(10,0)

Beispiel: https://jsfiddle.net/zUj3E/2/

Wenn dies nicht funktioniert, suchen Sie nach Beispielen für Haupt-/Nebenstrichmuster. Stellen Sie einfach sicher, dass das Beispiel, das Sie betrachten, D3 Version 3 verwendet: In Version 2 wurden einige zusätzliche Methoden für Ticks hinzugefügt, die nicht mehr unterstützt werden. Sehen Sie dies SO Q & A.

22
AmeliaBR

Variante der Antwort, die meinen Anforderungen entspricht. Ich habe die Werte ausgewählt, für die ich nur Tick-Markierungen anstelle von Ticks und Value haben wollte, fügte die "Hide" -Klasse hinzu. Dies kann jedoch für jede Variation des Themas verwendet werden.

            var gy = humiditySVG.append( "g" )
                .attr( "class", "y axis" )
                .attr( "transform", "translate(" + 154 + "," + 0 + ")" )
                .call( yAxis );

            humiditySVG.selectAll( "text" )
                .attr( "class", function ( d ) {
                                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return "hide";
                           }
                           return;
                       } );
            humiditySVG.selectAll( "line" )
                .attr( "x2", function ( d ) {
                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return 1;
                           } else {
                               return 3;
                           }
                           return;
                       } );
0
MaxRocket