Question

我正在尝试创建一个X轴图表，以％H：％M：％S格式及时显示交易进度。

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

requirements.txt

Answer 1

您将需要以下内容：

所需的比例尺。

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 with working code

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

1 个答案: