Mit d3.layout.stack() und Parsen von csv-bar-chart
In der Gestapelt-auf-Beispiel für das gruppieren von Mike Bostock er verwendet die folgenden zu generieren seiner Daten. Ich habe meine eigenen Daten in eine CSV-Datei, damit die Entschlüsselung dieser und wie kann ich das beseitigen und meine eigenen Daten aus dem CSV-Format, ist hier der Schlüssel.
//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)}; });
}
Dies ist schwierig zu verstehen, wie bereits erwähnt, vor allem, da es dann manipuliert Sie wie folgt vor:
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); })),
Jeder Schritt wird protokolliert, in der Konsole in mein Arbeits-code-Beispiel hier: http://tributary.io/inlet/8827504
ZIEL: meine csv-Datei und Bearbeiten in 2D-array an der d3 behandeln kann.
Etwas wie dieses, die nicht für mich arbeiten, könnte einen Ausgangspunkt.
//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]};
});
}))
};
Dank!
*BEARBEITEN***
In einem anderen Beispiel unter Verwendung von d3.layout.stack() und csv-code zu analysieren, geht wie folgt vor:
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; })]);
Beispiel: http://bl.ocks.org/mbostock/1134768
- so wie ich das verstehe, möchten Sie eigene Daten statt
bumpLayer
generator? - Ja, ich habe meine eigenen Daten in der csv-Datei finden Sie den link zu meinem code oben in den Zeilen 3 - 16 Nebenfluss.io/Einlass/8827504
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die Lösung, um die gestapelten var chart liegt im Verständnis d3.layout.stack() genauer in der d3 wiki hier: https://github.com/mbostock/d3/wiki/Stack-Layout
Die Methode, die unten gezeigt kombiniert mit d3.csv & und d3-stack layout:
Der vollständige code ist auf GitHub:
https://github.com/DeBraid/www.cacheflow.ca/blob/chart/styles/js/d3kickchart.js
EDIT: ich nahm ein video-tutorial diese Lösung im detail: http://youtu.be/n9kKdbzCiLI