Sankey link/node pixel level alignment

[monfera]

Tweaking the alignment (OOM: one pixel) between nodes and links. For past considerations, see #2017 (comment).

The result of this is generally better alignment, while preserving even box borders and multiedges with little to no overlap artifacts. For examples:

Magnified:

Vertical:

Mike Bostock's example:

[monfera]

The changed baselines show disappearing (and in some cases, appearing) node boundaries. On a retina screen, things show up fine:

I'll check it on devicePixelRatio === 1 devices tomorrow.

[monfera]

@alexcjohnson I tried a number of approaches - including stuff like dropping the path pixel fractions with things like var result = d.sankey.link()(d.link).replace(/\.[^( |Z|L|C)]*/g, ''); - but the most robust one is the avoidance of pixel truncation and use of geometricPrecision. I'll have a couple of codepen examples in a bit to eyeball if it's fine, and if so, I'll update the offending couple of jasmine tests (minor shape shifts).

[monfera]

@alexcjohnson here are two pens that - for now - point to a custom build with the shape-rendering: geometricPrecision option:

• https://codepen.io/monfera/full/jLVNxM/
• https://codepen.io/monfera/full/QqNdZG/

Does it look fine?

[monfera]

Also, some screenshot examples:

vertical:

minimal-value version (where you saw the most visible misalignment): https://codepen.io/monfera/full/EwPrKP/

[alexcjohnson]

Nice, I like it, thanks! 💃 once tests pass.

[monfera]

Note: this item surfaced during #2017 of which the original driver was #2014.