Non scaling stroke on zoom. #760

Activity

1. mdtusz

   added

   type: maintenance

   type: performance

   and removed

   type: performance

   on Jul 21, 2016
2. rreusser commented on Jul 21, 2016

   

   rreusser

   on Jul 21, 2016

   Last edited by rreusser

   Contributor

   More actions

   Correct me if I'm wrong, is it's not (reasonably) possible to apply that to markers, is it? Just paths? Or you can use actual markers but then they all have to be the same etc. so that for plotly this can really only be used on paths?
3. mdtusz commented on Jul 21, 2016

   

   mdtusz

   on Jul 21, 2016

   ContributorAuthor

   More actions

   As far as I know, it only works on paths. We could counteract marker size changes easily enough as well though - just need to set r = radius/scale if I'm not mistaken.
4. rreusser commented on Jul 21, 2016

   

   rreusser

   on Jul 21, 2016

   Last edited by rreusser

   Contributor

   More actions

   SVG elements get redrawn all the time, so not sure there's a meaningful performance overhead to scaling points if the transform is just computed to a string once and applied a bunch—thought it's a bit ugly.

   Added vector-effect: non-scaling-stroke; in the browser and appears to work fine, though obviously disappears as soon as you pause and it's redrawn. It's not immediately apparent to me that this would cause other problems since it's only present until it's redrawn—which only really happens on scroll zoom and soon-to-be transitions, unless I'm mistaken.
5. rreusser commented on Jul 21, 2016

   

   rreusser

   on Jul 21, 2016

   Contributor

   More actions

   Is this the spot for it? https://github.com/plotly/plotly.js/blob/master/src/components/drawing/index.js#L84
6. mdtusz commented on Jul 21, 2016

   

   mdtusz

   on Jul 21, 2016

   ContributorAuthor

   More actions

   I think that would do it - I was testing in scatter/plot.js, but drawing may have a nicer deeper effect.
7. rreusser commented on Jul 21, 2016

   

   rreusser

   on Jul 21, 2016

   Last edited by rreusser

   Contributor

   More actions

   Pardon the hacky informality, but deployed a quick PoC with it added on that line here: https://rreusser.github.io/plotly-expression-transform/

   that is,

   drawing.lineGroupStyle = function(s, lw, lc, ld) {
       s.style('fill', 'none')
       .style('vector-effect', 'non-scaling-stroke')
       .each(function(d) {

   A grep shows it's used in the following places:

   src/components/colorbar/draw.js
   390:                    .call(Drawing.lineGroupStyle,
   
   src/components/drawing/index.js
   83:drawing.lineGroupStyle = function(s, lw, lc, ld) {
   
   src/components/legend/style.js
   75:    line.call(Drawing.lineGroupStyle);
   
   src/traces/contour/style.js
   39:                .call(Drawing.lineGroupStyle,
   
   src/traces/scatter/style.js
   34:        .call(Drawing.lineGroupStyle);
   
   src/traces/scattergeo/plot.js
   231:    // GeoJSON calc data is incompatible with Drawing.lineGroupStyle
   
8. rreusser commented on Jul 21, 2016

   

   rreusser

   on Jul 21, 2016

   Last edited by rreusser

   Contributor

   More actions

   None of the other uses include transforms on the parent, I think, so I think it's relatively innocuous based on current usage. (Too bad point scaling can't be handled in parallel though.)

   Although maybe it is better to scope it to scatter (and contour?) traces though… If it's not used elsewhere then it's not really necessary to set it elsewhere, even if it has no effect.
9. rreusser

   closed this as completedon Jul 21, 2016