D3.js cambia stile linea percorso asse x

Question

Nei grafici d3.js, la linea dell'asse x (linea nera tra le barre e le etichette della barra) appare come questa di default: | ------- --------- |, veda la figura sottostante:

Come dovrei cambiare questo ad appena una linea retta (linee verticali su entrambe le estremità)?

Guardando l'SVG generato, questo codice sembra determinare lo stile: <path class="domain" d="M0,6V0H824V6"></path>, che viene generato automaticamente da D3.

Grazie!

Answer 1

Questo è controllato da axis.outerTickSize():

Una dimensione tick esterno 0 sopprime estremità quadrati del percorso dominio, invece producendo una linea retta.

Tutto ciò che devi fare è impostare axis.outerTickSize(0).

Answer 2

La risposta di Lars Kotthoff è ancora valida per le versioni d3 precedenti alla 4.x, con la versione 4 è stata modificata in axis.tickSizeOuter(). Si noti che tickSize() modifica anche i tick esterni, il che significa che l'ordine di chiamare tickSize() e tickSizeOuter() è importante.

d3.axisBottom(xScale) 
    .tickValues(series) 
    .tickSize(5) 
    .tickSizeOuter(0) 
);