时间戳

首页 > 解决方案 > 如何在 D3 的 xScale 中显示日期和时间

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

问题描述

在

在此处输入图像描述 如何在 D3 的 xScale 中显示日期和时间？我正在努力展示这一点。如图所示06 PM，我也可以有日期信息。

代码沙盒 - 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);

标签： javascriptd3.js

解决方案

您可以使用 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);
  }
});

推荐阅读