javascript - 折线图d3 js-x轴月

Question

我正在尝试制作一个简单的折线图，在x轴上有1月-12月的月份，在y上发布在我公司网站上的作业数量。我在映射y域时遇到了一些麻烦...并且基本上了解了该api应该如何工作。我发现有很多解析日期或数值x轴的示例，但几个月后似乎无法正确处理。

我已经对这段代码进行了很长时间的调整，甚至不确定自己在看什么。

对于年轻的菜鸟，任何帮助都将不胜感激。

要点如下:https://gist.github.com/wiredsister/8148974

我的样式如下:

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font: 10px sans-serif;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

Answer 1

日期/时间轴功能对您不起作用的原因是，您的月份数据实际上并未存储为日期/时间值:它只是一个简单的整数。您可以通过两种方式使用它。

第一种选择是，如果您一次只想绘制一年的图形(因此2013年1月与2014年1月没有重复)并且不需要进行任何基于时间的数学计算，则可以使用ordinal scale映射月份数字到月份的名称，根本不用担心时间尺度。

第二种选择，如果要将月份数据存储为日期，则需要将输入数据parse放入日期对象。之后，其余的代码应可以按预期工作。

当前，数据读取方法的第一条语句是数据转换例程，但它仅将所有内容存储为数字:

data.forEach(function(d) {
    d.month = +d.month;
    d.work = +d.work;
  });

+d.month告诉程序获取读入的数字字符串(“0”或“7”或“11”)，并将其替换为相应的数字。相反，您希望它读取该数字字符串并将其解释为一个月。

为此，您需要创建一个时间格式化对象，该对象希望看到一个数字并将其作为月份读取，然后对读取的值使用该格式化对象的 parse()方法。这有点复杂，因为您的月份数字是给定的范围是0-11，日期的预期数字格式是1-12。 (如果您可以在不使代码的其他部分复杂化的情况下更改数据格式，则将使此过程变得更加简单)。

var monthNumber = d3.time.format("%-m"); 
   //m is month number, '-' indicates no padding

data.forEach(function(d) {
    d.month = monthNumber("" + (+d.month + 1) );
      //convert the month to an integer and add one, 
      //then convert back to a string and parse
    d.work = +d.work;
  });

在此处查看此方法的实际操作: http://fiddle.jshell.net/eGTnB/

请注意，由于您的数据不包含有关指定年份的任何信息，因此浏览器将插入“零”年份，例如1900。如果您要对有效年份进行硬编码，则必须更改格式如下:

var year = 2013;
var yearPlusMonthNumber = d3.time.format("%Y %-m"); 
    //Y is four digit year, m is month number, '-' indicates no padding

data.forEach(function(d) {
    d.month = yearPlusMonthNumber("" + year + " " + (+d.month + 1) );
      //convert the month to an integer, add one,  
      //then combine with year (and space) as a string and parse
    d.work = +d.work;
  });