D3.js 如何从具有多个 Y 轴列的数据数组中提取 Y 域值

Question

考虑下面给出的代码 -

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)]);

我想提取max和min组成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

我对性能没有任何要求，但至少在眼睛看来，这似乎更令人愉悦和优雅。

D3.js 如何从具有多个 Y 轴列的数据数组中提取 Y 域值

D3.js how to extract Y domain value from data array with multiple Y axis columns

html

javascript

data-visualization

d3.js