streamgraph из .csv файла в D3

Question

Я хочу построить граф потока из данных в 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/korenmiklos/8052011

Answer 1

Вы должны предоставить данные в форме, которая поддается на stack layout для функции, чтобы работать, как ожидалось:

 
    by default the following attributes are required on each value: 

    * x - the x-position of the value. 
    * y - the y-thickness of the value. 
    * y0 - the minimum y-position of the value (baseline). 

Таким образом, вы должны преобразовать ваши данные немного больше:

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