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

我想提取最大值和最小值以形成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域值

1 个答案: