d3, максимум из d3.stack () дает неправильное максимальное значение

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

Вам нужно взять максимум из последних элементов.

//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>

Answer 2

Результат верный, вы находите максимум: (10 + 20) и (30 + 70), который является последним, 100.

Стек представляет каждую точку данных с двумя значениями:

Наконец, каждая точка представлена ​​в виде массива [y0, y1], где y0 - это нижнее значение (базовая линия), а y1 - верхнее значение (верхняя линия); разница между y0 и y1 соответствует вычисленному значению для эта точка. ( документы )

Учитывая ваши входные данные, в первой категории есть точки данных для ваших типов [0,10] и [10,30] - базовая линия второй точки равна верхней линии первой точки (baseline + value). Во второй категории есть точки данных для ваших типов [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 ]
]