Question

我有以下堆栈条形图数据。当我尝试计算y轴的最大值时，会给我100。应该为70。有人可以让我知道我在哪里做错了吗？

代码段如下

//DATA
var data = [{
        category: "test1",
        type1: 10,
        type2: 20
    },
    {
        category: "test2",
        type1: 30,
        type2: 40
    }
];
var keys = ["type1", "type2"];

var yScale = d3.scaleLinear()
    .range([400, 0]);
    
var stack = d3
    .stack()
    .keys(keys)
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);

var layers = stack(data);
    
console.log(d3.max(layers[layers.length - 1], d => (d[0] + d[1])))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Answer 1

结果正确，您发现（10 + 20）和（30 + 70）中的最大值，后者是100。

堆栈用两个值表示每个数据点：

最后，每个点都表示为数组[y0，y1]，其中y0是较低的值（基线），y1是较高的值（基线）；的 y0和y1之差对应于这点。（docs）

给出您的输入，第一类具有用于您的[0,10]和[10,30]类型的数据点-第二点的基线等于第一点的轮廓线（基线+值）。第二类具有针对您的类型[0,30]和[30,70]的数据点。

在您的max函数中，您要添加d[0]和d[1]，这会将上面两个元素数组中的每一个减少为一个总和：

// for each item in the array layers[layers.length-1], find the max of d[0] + d[1]
d3.max(layers[layers.length - 1], d => (d[0] + d[1]))

这将给您100，因为数组layers[layers.length-1]（代表第二个类别的部分）是：

[
  [ 0 , 30 ],
  [ 30 , 70 ]
]

Answer 2

您需要获取最后一个元素的最大值。

//DATA
var data = [{
        category: "test1",
        type1: 10,
        type2: 20
    },
    {
        category: "test2",
        type1: 30,
        type2: 40
    }
];
var keys = ["type1", "type2"];

var yScale = d3.scaleLinear()
    .range([400, 0]);
    
var stack = d3
    .stack()
    .keys(keys)
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);

var layers = stack(data);

console.log(d3.max(layers[layers.length - 1], d => d[1]))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

d3.stack（）中的d3，max给出错误的最大值

2 个答案: