D3v4 scale axis error when displaying ticks

Question

I am actually experimenting with D3 v4 and I am facing a problem when displaying ticks at a point in time.

Here is the difference between v3 and v4 mapping

The v3 code I'm trying to transpose is as follows

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 anyone have an idea for my mistake? I assume the v4 API is being misused, but I had difficulty finding documentation for this alpha version.

thanks

Answer 1

The key to this line is:

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

Try changing like this:

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

For a full working example, see jsFiddle

EDIT

Improved js script above to enable 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"));