Große und kleine Ticks mit V3 von D3?

Question

Ich möchte eine Achse mit großen und kleinen Ticks zeichnen, die unterschiedlich formatiert sind.

Dieses Beispiel http://bl.ocks.org/vjpgo/4689130 macht ungefähr was ich will, aber ich kann es nicht mit V3 von D3 arbeiten.

Ist .subDivide() eine veraltete Methode? Ich kann es in der aktuellen Dokumentation nicht sehen: https://github.com/mbostock/d3/wiki/SVG-Axes

Wenn ja, was ist der beste Ansatz zum Zeichnen von großen und kleinen Ticks in V3 von D3? Soll ich zwei völlig unterschiedliche Achsen zeichnen?

Answer 1

Die neueste Version bietet keine Möglichkeit, kleinere Ticks so explizit wie frühere Versionen zu zeichnen, aber es ist nicht nötig, eine andere Achse zu zeichnen, um das zu erreichen, was Sie wollen. Sie können die Skala verwenden, um zusätzliche Ticks zu generieren, und dann das bekannte Muster .data() verwenden, um Linien für diejenigen zu zeichnen, für die es noch keine Linien gibt.

xaxisg.selectAll("line").data(x.ticks(64), function(d) { return d; }) 
    .enter() 
    .append("line") 
    .attr("class", "minor") 
    .attr("y1", 0) 
    .attr("y2", -60) 
    .attr("x1", x) 
    .attr("x2", x); 

xaxisg ist der Behälter, in dem die Achse vor gezogen worden ist. Die Skalierung wird verwendet, um die erforderliche Anzahl an Ticks zu erzeugen, und die Zuordnung erfolgt durch die Daten selbst. Dies bedeutet, dass für die bereits vorhandenen Ticks bei Verwendung der .enter() Auswahl keine zusätzlichen Ticks gezogen werden.

Komplette jsfiddle here.