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