romsson / d3-gridding

grids for rapid D3 charts mockups
https://romsson.github.io/d3-gridding/example/capture/display.html
BSD 3-Clause "New" or "Revised" License
104 stars 7 forks source link

fix margins #36

Open Fil opened 4 years ago

Fil commented 4 years ago

margins are problematic, they tend to erase smaller contents by giving it negative height or width.

I've fixed the case of "height" in the "horizontal" gridding mode, but it needs to be generalized and unit tested.

Fil commented 4 years ago

Here we have 20 horizontal yearly series of 12 monthly values with valueHeight = max(monthly values) for each year. Adding margins in d3-gridding@0.1.2 will "eat" the content of the smaller series and give them negative heights.

before

before

When it's fixed we see all the series, and they share the available space evenly as a proportion of their valueHeight:

after

after
Fil commented 4 years ago

here's an interesting difficulty: if we give to each year a valueHeight = sum(monthly value), then the margins are taken within the height, and the poor month 01 in 2020 is half the size of a similar month in 2019.

Capture d’écran 2020-01-21 à 10 11 26
Fil commented 4 years ago

more or less fixed in #37