2

我想从 .csv 文件中的数据构建流图。我分叉了http://bl.ocks.org/lgrammel/1935509来生成流图，但我在加载数据时遇到了困难。我的JS在下面。

    var n = 8, // number of layers
    m = 54; // number of samples per layer

var colors = d3.range(n).map(function() { return d3.interpolateRgb("#aad", "#556")(Math.random()); });

var streamgraph = streamgraphChart()
        .margin({top: 10, right: 10, bottom: 10, left: 10})
        .color(function(d, i) { return colors[i]; }) // use same colors for both data sets
        .transitionDuration(1500);
d3.text("weekly_hours.csv", function(text) {
    var data = d3.csv.parseRows(text).map(function(row) {
        return row.map(function(value) {
          return +value;
        });
    });
    console.log(data);
    d3.select("#chart")
            .datum(data)
            .call(streamgraph);
  });

控制台日志很好地显示了数据数组，但我也得到了一个错误Error: Problem parsing d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,N。http://bl.ocks.org/koremiklos/8052011上没有显示任何内容

4

1 回答 1

0

您必须以适合stack layout函数的形式提供数据才能按预期工作：

    默认情况下，每个值都需要以下属性：

    * x - 值的 x 位置。
    * y - 值的 y 厚度。
    * y0 - 值（基线）的最小 y 位置。

所以你需要更多地转换你的数据：

var data = [];
d3.csv.parseRows(text).forEach(function(row, idx) {
    row.forEach(function(value, layer) {
      if (typeof data[layer] === 'undefined') data[layer] = [];
      data[layer].push({ x : idx, y : +value });
    });
});

工作演示：http ://plnkr.co/edit/P8Q4UGNpdUMw1V824vlK?p=preview

于 2013-12-20T12:27:01.870 回答