d3.js - 刻度显示中的 D3v4 时间刻度轴错误

Question

我实际上正在试验 D3 v4，并且在时间轴上的刻度显示方面遇到问题。

Here is the difference between v3 and v4 display

我尝试转置的 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 fiddle 以包括格式。

下面来自 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"));