折线图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月相比)并且不需要进行任何基于时间的数学运算,您可以使用序数比例来映射月份数字到月份名称,根本不用担心时间尺度.

第二个选项,如果要将月份数据存储为日期,则需要将输入数据解析为日期对象.之后,其余代码应按预期工作.

目前,您的数据读取方法的第一个声明是数据转换例程,但它只是将所有内容存储为数字:

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;
  });