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