d3js时间格式

Question

我是新来的d3，所以道歉是这个问题有一个明显的答案。我试图创建输入一个简单的路径作为JSON文件类似的东西

var data = [{"date":"2012-10-22","debit":"150.00"}, 
       {"date":"2012-10-29","debit":"1650.00"}, ..... 

，然后我试图让一个规模

var x = d3.time.scale() 
      .domain(d3.extent(data, function(d) { return (d.date); })) 
      .range([0, w]); 

d3.extend返回正确的值，但当我输入这条线和我得到NaN的路径。下面是我的代码

var margin = {top: 20, right: 50, bottom: 30, left: 50}, 
     w = 600 - margin.left - margin.right, 
     h = 400 - margin.top - margin.bottom, 
     barPadding = 3, 

    var debitMax = d3.max(data, function (d) { return + d.debit;}); 
    var x = d3.time.scale() 
      .domain(d3.extent(data, function(d) { return (d.date); })) 
      .range([0, w]); 
    var y = d3.scale.linear() 
      .domain([0, debitMax]) 
      .range([h, 0]); 

    var valueline = d3.svg.line() 
      .x(function(d) { return x((d.date)); }) 
      .y(function(d) { return y(d.debit); }) 
      .interpolate("basis"); 

    var svgContainer = d3.select("div").append("svg") 
      .attr("width", w + margin.left + margin.right) 
      .attr("height", h + margin.top + margin.bottom) 

    var debitPath = svgContainer 
      .append("path") 
      .attr("d", valueline(data)); 

，这里是我所得到的萤火

  Error: Problem parsing d="MNaN,318.181818 .......... 

感谢

Answer 1

在你的JSON的日期是不实际的东西的JavaScript就可以以合理的方式处理 - - 你需要将它解析成日期对象。 d3为此提供了各种功能（请参见the documentation）。在你的情况，你需要像

var parseDate = d3.time.format("%Y-%m-%d").parse; 
... 
.domain(d3.extent(data, function(d) { return parseDate(d.date); })) 
... 
.x(function(d) { return x(parseDate(d.date)); })