Javascript 折线图d3 js——x轴月份

我正在尝试做一个简单的线图，它在x轴上有一月到十二月的月份，在y轴上有我公司网站上发布的作业数量。我在映射y域时遇到了一些问题。。。基本上理解这个api应该如何工作。我找到了很多解析日期或数值x轴的例子，但我似乎无法正确地解析月份

我已经用这段代码调整了很长时间，我甚至不知道我在看什么

对于一个年轻的noob来说，任何帮助都是非常感谢的

要点如下：

我的造型看起来像：

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

---

日期/时间轴函数不适用于您的原因是您的月份数据实际上没有存储为日期/时间值：它只是一个简单的整数。有两种方法可以处理此问题

第一种选择，如果您每次只想绘制一年的图表（因此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范围内。（如果您可以在不使代码的其他部分复杂化的情况下更改数据格式，这将使此过程更简单）

请参见此处的实际操作方法：

请注意，由于您的数据没有任何关于指定年份的信息，因此浏览器将插入一个“零”年份，例如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;
  });

---

我想展示一下我是如何实现这个图的： 根据AmeliaBR的建议和Mike Bostock的月轴示例，我决定制作折线图，其中x和y为线性刻度，一个名为xLabels的变量为xAxis的格式化时间刻度。这样,

var xLabels = d3.time.scale().domain([new Date(2013, 0, 1), new Date(2013, 11, 31)]).range([0, w]);
    var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
    var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);

我像绘制正常线性比例一样绘制直线，但对于xAxis：

var xAxis = d3.svg.axis().scale(xLabels).ticks(d3.time.months).tickFormat(d3.time.format("%B")).tickSize(-h).tickSubdivide(true);
    graph.append("svg:g")
          .attr("class", "x axis") 
          .attr("transform", "translate(0," + h + ")")
          .call(xAxis);

我输入了刻度的XLabel，并将刻度设置为月份

以下是JSFIDE上的工作示例：

---

CSS代码没有给问题增加太多内容。如果您复制（a）定义轴的代码部分，以及（b）示例数据文件，则会更有用。@AmeliaBR，您是对的，它不是。这就是为什么我把我的要点和所有相关材料联系起来。对不起，给你添麻烦了。这里是更新的小提琴，包含了一个年份变量：谢谢你的回答。现在我只需要了解有序尺度是如何在域中工作的。这可能是更简单的方法。对于初学者，只需在程序顶部创建一个月名称数组，然后就可以使用

monthNames[d.month]

获得正确的标签。当然，您仍然需要一个顺序刻度（使用

.rangeRoundBands

或

.rangePoints（）

）来在图形中分隔数据；有大量的条形图示例显示了这些方法的实际应用。您可以使用电子秤上的所有d3日期/时间格式功能，而无需将数据中的简单月数转换为日期本身。我唯一的建议是将x刻度中的

data.length

更改为硬编码的12，这样，如果缺少一个月，与标签刻度的对齐就不会出现混乱。但如果您使用的是静态数据，可以提前检查错误，则不太可能导致问题。

var xAxis = d3.svg.axis().scale(xLabels).ticks(d3.time.months).tickFormat(d3.time.format("%B")).tickSize(-h).tickSubdivide(true);
    graph.append("svg:g")
          .attr("class", "x axis") 
          .attr("transform", "translate(0," + h + ")")
          .call(xAxis);