D3v4 time scale axis error in ticks display

Question

I'm actually experimenting D3 v4 and i face a problem in ticks display on time axe.

Here is the difference between v3 and v4 display

The v3 code i try to transpose is the following

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);

And the v4 code i made is this

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);

Does someone have an idea of my mistake? I guess a wrong usage of the v4 API but got difficulties finding documentation on this alpha version.

Thanks

Answer 1

The key is this line:

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

Try changing like so:

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

For a full working example see - jsFiddle

EDIT

Improved the above js fiddle to include formatting.

Snippet from jsFiddle below:

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"));