在 Mike Bostock 的 Stacked-to-Grouped 示例中,他使用以下内容生成他的数据。我在 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]};
});
}))
};
谢谢!
*编辑***
在另一个使用 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; })]);
最佳答案
堆叠 var 图表的解决方案在于理解 d3.layout.stack() 在此处的 d3 wiki 中详述: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
关于javascript - 使用 d3.layout.stack() 并为条形图解析 csv,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21762186/