如何在 d3 Javascript 图中设置 x 轴值？答案

【问题标题】：How to set x-axis values in d3 Javascript graph?如何在 d3 Javascript 图中设置 x 轴值？
【发布时间】：2013-03-09 11:58:37
【问题描述】：

我正在使用 d3 JS 库来绘制一些图表。它工作正常，但我陷入了一个我一直在努力解决一个小时的奇怪问题 - 我无法设置 x 轴值。这是图表（我添加了一个警报，将显示数据格式）：

http://jovansfreelance.com/bikestats/d3/tipsy.php

我希望 x 轴显示年份，但由于某种原因，我在代码中的任何地方都看不到，而是使用十进制值，所以它有 .006 而不是 2006 - 我不知道这是哪里即将形成，就像它取出第一个数字并将其余数字除以 100？！

如果有人能指出正在执行此操作的代码行，那很好，我可以从那里获取。

【问题讨论】：

标签： javascript graph d3.js

【解决方案1】：

正如另一个答案中所指出的，处理时间值的更好方法是明确使用时间尺度。但是，要达到您想要的效果，明确指定 x 轴的格式就足够了。也就是

var xAxis = d3.svg.axis()
        .scale(x)
        .tickSize(h - margin * 2)
        .tickPadding(10)
        .ticks(7)

添加

.tickFormat(d3.format("d"));

【讨论】：

【解决方案2】：

可能与此parseDate = d3.time.format("%Y") not working相关

如果是这样，您可能需要

d3.svg.axis()
   .scale(x)
   .tickSize(h - margin * 2).tickPadding(10).ticks(7)
   .tickFormat(function(d) { return d.toString(); }); // force the date value into a string

或者，如果您需要解析日期

   .tickFormat(function(d) { 
      var fmt = d3.time.format("%Y"); 
      return format.parse(d).toString() 
    });

【讨论】：

这确实改变了 x 轴标签的格式 - 但它会将每个标签变成 Thu Jan 01 1970 01:00:02 GMT+0100 (Central Europe Standard Time)。我想我可能需要摆弄在那之前的var x = d3.time.scale() 行。