Question

在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可以处理的2D数组。

这样的东西对我来说不起作用，可能会提供一个起点。

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

示例：http://bl.ocks.org/mbostock/1134768

Answer 1

堆叠变量图的解决方案在于理解d3 wiki中详细介绍的d3.layout.stack（）：https://github.com/mbostock/d3/wiki/Stack-Layout

下面显示的方法结合使用d3.csv＆amp;和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

使用d3.layout.stack（）并解析条形图的csv

1 个答案: