在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 ）的最終結果。 查看代碼，它使用符號和嵌套來實現多個圖形。 但是，我的數據的結構不同。 我在一欄中沒有多個不同的符號。 如果要使用全部或部分變量，如何復制此結果？

我確實嘗試了nest（）函數，並實現了一個數組，其中時間是關鍵，而溫度是值：

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由symbol給出，作為數據數組的索引，例如

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

處理數據的所有內容都需要以這種方式進行訪問。 基本上就是這樣； 完整的演示在這里 。

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

如果您希望某些部分（例如x軸）僅顯示在其中一張圖表上，請將創建它的代碼包裝在if語句中，該語句檢查例如當前symbol 。