堆疊在d3js多個折線圖，而不嵌套數據

Question

我有大量的數據，從csv提取和分類成整齊的類別，如下：

return { 
       time: d3.time.format('%Y/%m/%d %H:%M:%S').parse(d.Time), 
       conditions: d.Conditions.replace(/"/g, ''), 
       temperature: +d.Temperature, 
       humidity: +d.Humidity.replace(/[",%]/g, ''),  
       windDir: d.WindDir,        
       windDeg: +d.WindDeg,        
       pressure: +d.Pressure.replace(/"/g, '') 
} 

我想達到類似於「小的最終結果堆疊倍數「（http://bl.ocks.org/mbostock/9490516）。看代碼，它使用符號和嵌套來實現多個圖形。但是，我的數據結構並不一樣，一列中沒有多個不同的符號。如果我想使用全部或部分變量，如何複製此結果？

我曾嘗試與巢（）函數擺弄，並取得了一個數組，其中時間是關鍵，溫度值：

d3.nest().key(function(d) {return d.time;}) 
    .rollup(function(d) {return d3.sum(d, function(g) {return g.temperature;}); }) 
    .entries(dataset) 

...但是，這並沒有給我多每次我想要的值（大概需要Small Stacking示例）。

爲了澄清什麼，我現在有，這是我的領域/範圍/軸定義：

var x = d3.time.scale() 
     .range([0, width]); 
    var y = d3.scale.linear() 
     .range([height, 0]); 

    var xAxis = d3.svg.axis().scale(x) 
     .orient("bottom") 
     .ticks(10); 
    var yAxis = d3.svg.axis().scale(y) 
     .orient("left") 
     .ticks(7); 

    x.domain(d3.extent(dataset, function(d) { return d.time; })); 
    y.domain([d3.min(dataset, function(d) { return Math.min(d.temperature - 5, d.absHumidity - 1); }), d3.max(dataset, function(d) { return d.temperature + 2; })]); 

我svg.append：

var svg = d3.select('body') 
     .append('svg') 
      .attr('width', width + margin.left + margin.right) 
      .attr('height', height + margin.top + margin.bottom) 
     .append('g') 
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); 

Answer 1

有沒有內在的需要對數據進行嵌套，這或多或少只是在這種情況下實現所期望的方便的方式。對於你的數據，你已經有了某種嵌套，它只是不太明確。

一般的方法是嵌套結構決定顯示內容。也就是說，對於每個圖形，外部嵌套中都有一個「事物」。這些都是在你的情況下，不同的測量，所以你需要包含這些數組：

var symbols = ['temperature', 'humidity', 'windDeg', 'pressure', 'absHumidity']; 

其他一切掛關閉該。最直觀的（雖然沒有特別D3方式）來添加一個圖表每個元素是簡單地循環陣列之上：

symbols.forEach(function(symbol) { 
    // ... 
}); 

在循環內部，相關數據由symbol給出作爲一個指數到數據陣列，例如

y.domain(d3.extent(dataset, function(d) { return d[symbol]; })); 

處理數據的一切都需要以這種方式訪問​​它。這基本上就是這樣。完整演示here。

要更改顯示內容，您只需編輯symbols數組 - 每個元素表示要顯示的度量的屬性名稱。

如果您希望特定部分（例如x軸）僅顯示在其中一個圖表上，請將其創建的代碼包裝在if語句中，以檢查例如目前symbol。