-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Filled link path #2
Conversation
…relying on stroke-width
Probably best if @alexcjohnson reviewed this, as he requested this change (I think). |
@alexcjohnson this is a before/after comparison: Move 'Nuclear' up/down and close to 'Thermal generation' to see artifacts here and no artifacts here. |
Looks great. I guess in an ideal world we would smoothly transition between constant perpendicular thickness (which is what you get from the previous behavior, and I think gives the most "correct" visual significance to the link value) and constant vertical thickness (this behavior, which results in thinner perpendicular thickness at steep angles) but that seems like a fairly complicated optimization problem, while this simple solution has so much going for it: fixes fat-link artifacts, avoids overlaps in multi-part links, and allows link outline strokes. So I'd call this a big win! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💃
Perhaps due to the sine illusion? |
Exactly - though I'd argue it's not an illusion, it really is thinner because what's important in terms of visually conveying "this is how much material is flowing along this link" is not the vertical width (which is what's conserved in the sine illusion) but the perpendicular width (which is conserved with the previous stroke-width approach). The vertical width doesn't, in itself, mean anything. If we ever extend this to support cycles or nodes in different orientations, this will become very important. |
@etpinard neat, I wasn't aware of the sine illusion aspect, thanks! |
Purports to solve these items:
A not particularly useful example, showing alignment of multi-edge link boundaries without gap or overlap (to reproduce the example, merge d3#19 also):
![image](https://cloud.githubusercontent.com/assets/1548516/25338667/501dc466-2900-11e7-91c7-41e1c8c57dcd.png)
The same, without styling the link path
![image](https://cloud.githubusercontent.com/assets/1548516/25338863/fa6df6a2-2900-11e7-92f3-80845a87e272.png)
stroke
, i.e. just the fill:The same, using a translucent black, to better show there are no disturbing gaps or overlaps - the same pairs of nodes are still multi-edges as above, and the nodes are moved vertically to stress test the link curves:
![image](https://cloud.githubusercontent.com/assets/1548516/25339020/8e68fffa-2901-11e7-94ba-f479c1687102.png)
There's also some loss:
stroke-width
based logic doesn't haveD3
, usually code size consideration is important (also, it's in theD3
org and made by Mike Bostock but isn't part ofD3
proper)stroke-width
instead of the usuald.link.dy