Benutzerdefinierte Tick-Größe auf Achse (d3js)

Question

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 und verwenden, die in .tickFormat([format]) gemacht und das funktioniert gut, weil [Format] erwartet wird, eine Funktion zu sein. Aber das ist nicht möglich mit .innerTickSize([size]), die eine Nummer erwartet.

z. wenn ich das Häkchen bei Wert 70 sein mehr wollen will ich so etwas wie dies tun:

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

Aber wenn ich myTickSize als Argument .innerTickSize() verwenden:

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

Ich erhalte ein Fehler: Ungültige Wert für Attribut x2 = "NaN" Fehler für jeden Tick.

Answer 1

Die Funktion tickSize akzeptiert nur eine Zahl als Argument, keine Funktion, aber es gibt andere Lösungen.

Der einfachste Ansatz? Nachdem die Achse gezeichnet wurde, markieren Sie alle Hilfsstriche und ändern Sie die Größe entsprechend ihrem Datenwert. Denken Sie daran, dass Sie dies auch nach jedem Achsen-Neuzeichnen tun müssen.

Beispiel:
http://fiddle.jshell.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 Strichmarkierungen an der maximalen und minimalen Werte auch als Teil derselben <path> wie die Achsenlinie gezogen werden, so verkürzt sie haben nicht viel Wirkung. Wenn Sie diesen Mangel an Kontrolle nicht mögen, erklären Sie, dass die "äußeren" Ticks beim Einrichten der Achse null Länge haben. Das macht die Ecken des Pfades ab, aber die äußeren Zecken noch Linien haben, dass Sie das gleiche wie die anderen tick Linien steuern:

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

Beispiel: http://fiddle.jshell.net/zUj3E/2/

Wenn das nicht funktioniert, google für Beispiele für große/kleine Tick-Muster. Stellen Sie nur sicher, dass das Beispiel, das Sie betrachten, d3 Version 3 verwendet: In Version 2 wurden einige zusätzliche tickbezogene Methoden hinzugefügt, die nicht mehr unterstützt werden. See this SO Q&A.

Answer 2

Variante auf die Antwort, die meinen Anforderungen entspricht. Wählte die Werte, für die ich nur Häkchen anstelle von Ticks und Wert wollte, fügte die Klasse "hide" hinzu. Aber dies kann 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; 
         });