时间戳

首页 > 解决方案 > D3.js V4：如何使用时间和 %H:%M:%S 格式创建 X 轴

d3.js - D3.js V4：如何使用时间和 %H:%M:%S 格式创建 X 轴

问题描述

我正在尝试创建一个带有 X 轴的图表，以 %H:%M:%S 格式显示交易的及时进展。

我尝试过以下代码，但它只显示年份。秒对于在 x 轴上显示非常重要。我知道需要使用 timeParse，但我不确定如何利用它。我在网上搜索了很多，但没有例子。

  // Add X axis

  var parseDate=d3.timeParse("%H:%M:%S")
  var x = d3.scaleTime()  
  .domain([new Date(0,0,0), new Date (12,59,59)])
  .range([ 0, width ]);

标签： d3.js

解决方案

您将需要以下内容：

所需的比例。

var x = d3.scaleTime()
  .domain([new Date(1554236172000), new Date(1554754572000)])
  .range([0, width]);

具有正确格式和所需刻度数的轴，您可能希望.ticks(d3.timeMinute.every(desiredMinutesToHandle));用于更好地显示数据。

var xAxis = d3.axisBottom(x)
  .tickFormat(d3.timeFormat("%H:%M:%S"))
  .ticks(50);

最后通过某些转换将您的轴附加到您的 svg 以获得漂亮的外观

svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis)
 .selectAll("text")
 .attr("y", -5)
 .attr("x", 30)
 .attr("transform", "rotate(90)")

带有工作代码的 Plunkr

推荐阅读