I am experiencing an issue with stack charts with a single key with negative values. I am using d3.stackOffsetDiverging. If my single key data has all negative values, they all appear above the x axis. If it has some negative values, the negative stack do not show up. If they are all positive it appears as it should. To calculate the stack data, I am running a function that looks like this:

const getStackedData: any = (data, keys) => {
    const order = StackSortOrderToD3OrderAccessor(1);
    return stack().keys(keys).offset(stackOffsetDiverging).order(order)(data);
};

See below for the results I am getting with various inputs for data

For

const data = [
    {dogs: 5, id: 0, name: "May"},
    {dogs: -3, id: 1, name: "June"}
];

const keys = ["dogs"];

getStackedData(data, keys) returns

[
    [
        [0, 5, data: {…}],
        [0, -3, data: {…}] 
    ]
]

Which looks like

However, if I add another item to keys and run getStackedData(data, ["dogs", ""]) the x and y values switch. See below.

[
    [
        [-5, 0, data: {…}],
        [-3, 0, data: {…}]
    ],
    [
        [0, NaN data: {…}],
        [0, NaN data: {…}]
    ],
]

This makes the chart look correct except for the extra key in the legend. See below

I am using d3-shape version 1.2.0. Let me know if you can fix this issue!