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

Question

我实际上正在尝试D3 v4，我在时间轴上显示滴答声问题。

Here is the difference between v3 and v4 display

我尝试转置的v3代码如下

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我制作的v4代码就是这个

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有人知道我的错误吗？我猜错了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"));