折線圖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;
  });

Answer 2

我想展示一下我實際上是如何最終實現該圖的：根據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用於比例，並將我的刻度格式化為幾個月。

這是jsfidde上的工作示例： http : //jsfiddle.net/vB5eW/