search

plotly / react-plotly.js

A plotly.js React component from Plotly 📈
MIT License
1.02k stars 136 forks source link

React-plotly Svg transform #23

Open jmeberst opened 6 years ago

jmeberst commented 6 years ago

I'm trying to use react-plotly inside a foreign object within an Svg, this works fine as shown here. https://codepen.io/anon/pen/eyYjgr

However I would like to move this object using a transform. <foreignObject id={"TestSvgFO"} width="100%" height="100%" transform="translate(150, 0)" xmlns="http://www.w3.org/2000/svg">

This results in sliding the view window off the plotly graph instead of moving it. https://codepen.io/anon/pen/qpByMe

Any suggestions on a way to get it to move correctly in an Svg object with a transform?

(edited your links so they work - alexcjohnson)

bpostlethwaite commented 6 years ago

@jmeberst I don't seem to have access to those codepens.

alexcjohnson commented 6 years ago

I'm afraid we've got some longstanding bugs with plotly.js inside css-transformed elements - probably you're seeing the same thing as this issue: https://github.com/plotly/plotly.js/issues/888

jmeberst commented 6 years ago

@alexcjohnson I'm not having any issues with the css transforms when they are just applied to a wrapper div though, that seems to be working correctly where the entire graph can be moved as a unit like I would expect.

https://codepen.io/anon/pen/BJaqeN

alexcjohnson commented 6 years ago

Weird. This behaves differently (and perhaps correctly) in Firefox, and Chrome seems confused about where items are (note that I've selected the first bar in the inspector): screen shot 2017-12-12 at 3 50 23 pm So I'm tempted to say this is a Chrome bug...

jmeberst commented 6 years ago

It's working as I would expect in Firefox. What a strange bug.