Errore asse scala tempo D3v4 nel display ticks

Question

In realtà sto sperimentando D3 v4 e affronterò un problema nella visualizzazione delle zecche sull'as.

Here is the difference between v3 and v4 display

Il codice v3 cerco di trasporre è il seguente

var x = d3.time.scale().range([0, width]); 
 
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(6); 
 
x.domain(d3.extent(data.map(function(d) { return d.date; }))); 
 

 
gXAxis.call(xAxis);

E il codice v4 ho fatto è questo

import {scaleTime, scaleLinear} from 'd3-scale'; 
 
import {axisBottom, axisLeft} from 'd3-axis'; 
 
import {select} from 'd3-selection'; 
 
import {extent} from 'd3-array'; 
 

 

 
let x = scaleTime().range([0, width]) 
 
    .domain(extent(data.map(function(d) { return d.date; }))); 
 

 
let xAxis = axisBottom().scale(x).ticks(6); 
 

 
gXAxis.call(xAxis);

Qualcuno ha un'idea del mio errore? Immagino un uso errato dell'API v4, ma ho avuto difficoltà a trovare la documentazione su questa versione alpha.

Grazie

Answer 1

la chiave è questa linea:

let xAxis = axisBottom().scale(x).ticks(6); 

Provare a cambiare in questo modo:

let xAxis = axisBottom(x).ticks(6); 

Per un esempio di lavoro completa vedere - jsFiddle

EDIT

Migliorato il js fiddle sopra per includere la formattazione.

frammento da jsFiddle di seguito:

let x = d3 
    .scaleTime() 
    .range([0, totalWidth]) 
    .domain(d3.extent(data)); 

let xAxis = d3 
    .axisBottom(x) 
    .ticks(d3.timeDay, 1) 
    .tickFormat(d3.timeFormat("%a %d"));