d3.js的日期軸

Question

我正在玩d3.js的javascript庫。我可以用2個數字軸創建一個圖表，但現在我想要一個數字軸和一個帶有日期的軸。不幸的是，我無法做到這一點。

首先，多數民衆贊成在沒有運行該代碼：

d3.json('builds.json', 
     function(data){ 

      var format = d3.time.format("%Y-%m-%d"); 

      data.forEach(function(d) { 
       d.finished_at = format.parse(d.finished_at); 
       }); 

      var margin = {top: 40, right: 40, bottom: 40, left: 40}, 
      width = 960, 
      height = 500; 

      var x = d3.time.scale() 
       .domain(d3.extent(data, function(d) { return d.finished_at; })) 
       .range([0, width - margin.right - margin.left]); 

      var y = d3.scale.linear() 
       .domain(d3.extent(data, function(d) { return d.result; })) 
       .range([height - margin.top - margin.bottom, 0]); 

      var xAxis = d3.svg.axis() 
       .scale(x) 
       .orient("bottom"); 

      var yAxis = d3.svg.axis() 
       .scale(y) 
       .orient("left"); 

      var svg = d3.select("body").append("svg") 
       .attr("width", width) 
       .attr("height", height) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      svg.selectAll("circle") 
       .data(data) 
       .enter().append("circle") 
       .attr("cx", function(d) { return x(d.finished_at); }) 
       .attr("cy", function(d) { return y(d.result); }) 
       .attr("r", 6); 

      svg.append("g") // Render the axis by calling a <g> selection. 
       .attr("transform", "translate(0," + y.range()[0] + ")") //setzt x-achse an null punkt von y-achse 
       .call(xAxis); 

      svg.append("g") 
       .call(yAxis); 

     }); 

變量finished_at看起來是這樣的：「finished_at」：「2011-11-20」，我試圖解析它。

但產量如下：

任何人可以幫我嗎？

Answer 1

問題可能在於您的數據。您需要確認您的JSON中的所有finished_at值的格式都是正確的。

您的代碼會出現一個小的工作JSON數據集來很好地工作：http://bl.ocks.org/4162693