D3.js如何與多個Y軸柱

Question

考慮下面給出的代碼從數據中提取列Y域值 -

var height = 500; 

var data = [ 
    { 
     "Product": "A", 
     "Branch1": 1200, 
     "Branch2": 2000 
    }, 
    { 
     "Product": "B", 
     "Branch1": 1588, 
     "Branch2": 3495 
    } 
]; 

var YAxisList = ["Branch1", "Branch2"]; 

var maxArray = []; 
YAxisList.forEach(function (d) { 
    data.forEach(function (i) { 
     maxArray.push(i[d]); 
    }); 
}); 

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

y.domain([d3.min(maxArray), d3.max(maxArray)]); 

我想提取最大值和最小值，以形成Y軸域範圍。我已經通過使用詳細的方式解決了這個問題，但我懷疑必須有一種優雅的方式來實現這一點。有人可以在這方面闡明一些情況嗎？

Answer 1

另一種方法可能會採用一些比較的D3的功能：

function getExtent(list) { 
    return d3.extent(       // 4. Get the extent from that array 
     d3.merge(        // 3. Merge all arrays into a single one 
      data.map(function(d) {    // 2. Map each object's values to an array 
       return list.map(function(y) { // 1. Get the array of values to map 
        return d[y]; 
       }); 
      }) 
     ) 
    ); 
} 

console.log(getExtent(["Branch1"]));   // [1200, 1588] 
console.log(getExtent(["Branch2"]));   // [2000, 3495] 
console.log(getExtent(["Branch1", "Branch2"])); // [1200, 3495] 

y.domain(getExtent(yAxisList));     // This extent can be used directly 

我不會讓對性能的任何索賠，但至少到眼睛這似乎是更令人愉快和優雅。