Conversation
|
A problem currently is that the halo option can be an object containing anything. I don't know how to check that the values are numbers or strings as we usually do for normal options. |
|
scratch that, a much better solution will be to use a svg filter (#409). I have a prototype here https://observablehq.com/@fil/line-halo-in-pure-svg |
|
new version with the SVG filter strategy |
Fil
force-pushed
the
fil/line-halo
branch
2 times, most recently
from
e2eb2da to
4f7ecbd
Compare
|
manually rebased |
src/marks/halo.js
Outdated
| <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="${radius}"></feMorphology> | ||
| <feFlood flood-color="${color}" result="BG"></feFlood> | ||
| <feComposite in="BG" in2="DILATED" operator="in" result="OUTLINE"></feComposite> | ||
| <feMerge> | ||
| <feMergeNode in="OUTLINE" /> | ||
| <feMergeNode in="SourceGraphic" /> | ||
| </feMerge>`); |
There was a problem hiding this comment.
You only need the result+in for dilated; otherwise in defaults to the previous filter primitive.
| <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="${radius}"></feMorphology> | |
| <feFlood flood-color="${color}" result="BG"></feFlood> | |
| <feComposite in="BG" in2="DILATED" operator="in" result="OUTLINE"></feComposite> | |
| <feMerge> | |
| <feMergeNode in="OUTLINE" /> | |
| <feMergeNode in="SourceGraphic" /> | |
| </feMerge>`); | |
| <feMorphology in="SourceAlpha" result="dilated" operator="dilate" radius="${radius}"></feMorphology> | |
| <feFlood flood-color="${color}"></feFlood> | |
| <feComposite in2="dilated" operator="in"></feComposite> | |
| <feMerge> | |
| <feMergeNode></feMergeNode> | |
| <feMergeNode in="SourceGraphic"></feMergeNode> | |
| </feMerge>`); |
src/marks/line.js
Outdated
| ); | ||
|
|
||
| if (this.halo) { | ||
| // With variable aesthetics, we need to regroup segments by line |
There was a problem hiding this comment.
This is hard to follow. I think it would be clearer to initialize the DOM the desired way from the beginning, rather than creating it once (above using groupIndex) and then moving things around afterwards to apply the halo. (Especially since this already requires changing groupIndex to populate a segment property on the data, whose purpose isn’t clear until you go look at the code here.)
There was a problem hiding this comment.
I rewrote the whole thing, PTAL
|
This seems like a nice feature. The implementation needs some tidying. |
|
A similar situation arises with the line opacity when the line is broken into segments for varying aesthetics: https://talk.observablehq.com/t/opacity-artifacts-in-line-segments/8142/2 |
2 participants
Add a line halo. See documentation and test examples.
closes #860
a follow-up could be to add the halo option to other "non-fillable" marks: Plot.link, Plot.arrow, Plot.tick, Plot.rule…
EDIT: this PR was completely rewritten, obsolete description
An unexpected difficulty was to make it compatible with group aesthetics. I had to pass a flag (in the shape of a counter) to secondary groups.
For now I just "walk back to the first element", and don't use the counter per se, becausewe might want to switch to a real flag that would be absent from the first group—which might be more satisfying?