繪製D3簡單的折線圖與數組

Question

我試圖實現此代碼：http://bl.ocks.org/3883245，但不是加載TSV文件，我從數組中加載數據。 這裏是陣列的樣子：

[["2012-10-02",2],["2012-10-09", 2], ["2012-10-12", 2]] 

，然後我申請上這個函數來獲取CSV格式：var data = d3.csv.format(BigWordsDates2[ArrayIndex]);

，但仍然沒有顯示出來。

這裏是整個代碼：我覺得我不是那麼遠從得到它，但我一直在努力了3天，斜面仍然得到它的工作：

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
     width = 80 - margin.left - margin.right, 
     height = 80 - margin.top - margin.bottom; 

     var data = d3.csv.format(BigWordsDates2[ArrayIndex]); 

     var parseDate = d3.time.format("%Y-%b-%d").parse; 

     var x = d3.time.scale() 
      .range([0, width]); 

     var y = d3.scale.linear() 
      .range([height, 0]); 

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

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

     var line = d3.svg.line() 
      .x(function(d) { return x(d.date); }) 
      .y(function(d) { return y(d.close); }); 

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

     d3.csv.parseRows(data, function(data) { 
      data.forEach(function(d) { 
      d.date = parseDate(d.date); 
      d.close = parseInt(d.close); 
      }); 

     x.domain(d3.extent(data, function(d) { return d.date; })); 
     y.domain(d3.extent(data, function(d) { return d.close; })); 

      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis); 

      svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
      .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 6) 
       .attr("dy", ".71em") 
       .style("text-anchor", "end") 
       .text("Price ($)"); 

      svg.append("path") 
       .datum(data) 
       .attr("class", "line") 
       .attr("d", line); 
     });` 

我想我也是用d.date和d.close做錯了什麼，但我也弄不清楚。

Answer 1

圖表使用的數據的格式如下

[{ date: '...', close: '...'}, 
{ date: '...', close: '...'}] 

所以，你需要分析你的陣列：

// fix your data parser 
var parseDate = d3.time.format("%Y-%m-%d").parse; 

var arrData = [ 
    ["2012-10-02",200], 
    ["2012-10-09", 300], 
    ["2012-10-12", 150]]; 

// create a new array that follows the format 
var data = arrData.map(function(d) { 
    return { 
     date: parseDate(d[0]), 
     close: d[1] 
    }; 
}); 

這裏的工作版本：http://jsfiddle.net/jaimem/T546B/

PD：視您可能必須修改您的y比例域。