javascript - 如何在D3中的xScale中显示日期和时间

Question

如何在D3中的xScale中显示日期和时间？我正在努力展示这一点。如图所示 06 PM 除此之外，我还可以获得日期信息。

codesandbox - https://codesandbox.io/s/holy-leftpad-yhm8h

createdTime : 1568720732134

代码-

var xDomain = d3.extent(data, function(d) {
            return d.createdTime;
        });

var xScale = d3
            .scaleTime()
            .range([0, width])
            .domain(xDomain);

Answer 1

您可以使用 x 轴的 tickFormat()返回自定义刻度值的方法，以及 d3.timeFormat()创建将时间戳映射到格式正确的字符串的格式化方法。

例如，如果您总是想显示第一个刻度的日期和时间，以及所有其他刻度的时间，您可以使用:

const formatToDateAndTime = d3.timeFormat("%a %d %-I%p"); // e.g. Tue 17 2PM
const formatToTime = d3.timeFormat("%-I%p"); // e.g. 2PM

xAxis.tickFormat((d, index) => {
  if(index === 0) {
    return formatToDateAndTime(d);
  } else {
    return formatToTime(d);
  }
});