Improve group focus indicator #84
Labels
enhancement
New feature or request
help wanted
Extra attention is needed
needs investigation
This item needs to be looked into, additional content from issue submitter would help as well.
question
Further information is requested
Hi!
The group focus indicator isn't great (especially for scatter, line, and clustered bars).
I'm talking about this:
I've got a suggested solution: filters. You're already using them for text and geometries - it's the dual-outline strategy (and white outline on text). We can use that same strategy to create some great looking group focus indicators. On focus, you'd apply the filter to a special group appended at the end of the chart (the group doesn't need to be appended on focus, just change the
href
values).This "top" group contains
<use>
elements, which simply reference the group or element you want to duplicate:Like this:
Here's what it would look like if you group stuff up like this and apply a filter to the group:
The code for the filter looks like this:
You can obviously change the radius values to whatever:
Here are some examples:
Of course, you can just show the filter effect on only the geometry group if you want, just don't add a
<use>
element for the text:And for line, you have 3 elements (line, dot group, text):
I think this is quite an aesthetic improvement and also improves accessibility. The bounding-box style focus indicator just isn't great (I wonder who designed that...).
(Oh, and as a note: when we hover and get that dotted line effect? The components are currently accomplishing this with filters and fill effects on a duplicated element. It would actually be an improvement to copy my above solution and have a
<g>
element that contains<use>
elements here too, and you just have to update the reference id (and add the fancy fill/filter effects to the<use>
element). It's not a big deal, since the current system works. But this reduces render/draw time and only requires a paint update instead.)The text was updated successfully, but these errors were encountered: