刻度线显示中的D3v4时间刻度轴误差

Question

我实际上正在尝试D3 v4,我在时间轴上的刻度显示中遇到问题.

这是v3和v4显示之间的区别

我尝试转置的v3代码如下

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

我制作的v4代码就是这个

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

有人知道我的错误吗？我猜v4 API的用法不正确,但很难找到这个alpha版本的文档.

谢谢

Answer 1

关键是这一行:

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

尝试改变如下:

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

有关完整的工作示例,请参阅-jsFiddle

编辑

改进了上面的js小提琴,包括格式化.

来自jsFiddle的片段如下:

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