在條形圖中使用d3.layout.stack（）和解析csv

Question

在Mike Bostock的堆棧分組示例中，他使用以下內容來生成他的數據。我有我自己的數據在一個CSV文件，因此解密這一點，以及如何我可以消除它，並使用我自己的CSV數據是這裏的關鍵。

// Inspired by Lee Byron's test data generator. 
function bumpLayer(n, o) { 

    function bump(a) { 
    var x = 1/(.1 + Math.random()), 
     y = 2 * Math.random() - .5, 
     z = 10/(.1 + Math.random()); 
    for (var i = 0; i < n; i++) { 
     var w = (i/n - y) * z; 
     a[i] += x * Math.exp(-w * w); 
    } 
    } 

    var a = [], i; 
    for (i = 0; i < n; ++i) a[i] = o + o * Math.random(); 
    for (i = 0; i < 5; ++i) bump(a); 
    return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; }); 
} 

這是棘手的理解，如前所述，特別是因爲它是那麼操作如下：

n = 6, // number of layers 
m = 12, // number of samples per layer 
stack = d3.layout.stack(), 
layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })), 

每一步都記錄在我工作的代碼示例這裏的控制檯：http://tributary.io/inlet/8827504

目標：將我的csv文件並將其操作爲d3可處理的二維數組。

像這樣的東西，這對我不起作用，可能會提供一個起點。

// store the names of each column in csv file in array 
var headers = ["Under $1000","$1000-$9999","$10000-19999","$20000-99999","100K - $999999","Over $1 Million"]; 


var myData = function(mycsv){ 

    d3.layout.stack()(headers 
       .map(function(value){ 
         return mycsv.map(function(d) { 

         return {x: d.Category, y: +d[value]}; 
         }); 
       })) 
}; 

謝謝！

* EDIT ***

在另一個例子中使用d3.layout.stack（）和CSV的代碼來解析去如下：

d3.csv("crimea.csv", function(crimea) { 

    // Transpose the data into layers by cause. 
    var causes = d3.layout.stack()(["wounds", "other", "disease"].map(function(cause) { 
    return crimea.map(function(d) { 
     return {x: parse(d.date), y: +d[cause]}; 
    }); 
    })); 

    // Compute the x-domain (by date) and y-domain (by top). 
    x.domain(causes[0].map(function(d) { return d.x; })); 
    y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]); 

實施例：http://bl.ocks.org/mbostock/1134768

Answer 1

堆棧var圖表的解決方案在於瞭解d3 wiki中詳細介紹的d3.layout.stack（）：https://github.com/mbostock/d3/wiki/Stack-Layout

以下所示的方法，使用d3.csv &和d3堆棧佈局結合：

d3.csv("kick.csv", function (data){ 

    // each string is its own column in the csv file, this hard-coding is sub-optimal 
    var headers = ["Under $1000","$1000-$9999","$10000-19999","$20000-99999","100K - $999999","Over $1 Million"]; 

    // Category = strings that start each row, priceRange are data values 
    var layers = d3.layout.stack()(headers.map(function(priceRange) { 
     return data.map(function(d) { 
      return {x: d.Category, y: +d[priceRange]}; 
     }); 
    })); 

    // insert rest of d3js chart code 
}); 

完整的代碼是在GitHub： https://github.com/DeBraid/www.cacheflow.ca/blob/chart/styles/js/d3kickchart.js

編輯：我記錄的視頻教程在詳細描述本解決方案：http://youtu.be/n9kKdbzCiLI