d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.48k stars 308 forks source link

Single Key Negative stackOffsetDiverging Issue #114

Closed hannahsquier closed 5 years ago

hannahsquier commented 6 years ago

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

image

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

image

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

hannahsquier commented 6 years ago

i was able to fix this issue with this change https://github.com/d3/d3-shape/pull/115

mbostock commented 5 years ago

Thanks for the fix! Sorry it took me so long.