I’m trying to create some drawing tools for our charts. That means the ability to add annotations and draw shapes (circle, square, etc.) on the chart. I see that Plotly layout has the annotations property, but those seem to assume that you already have the annotations in advance.
I found this CodePen which shows off moving and editing an existing annotation: http://codepen.io/etpinard/pen/PZgPKx. This may help me allow them to add annotations and move them around, but it’s a bit basic for what I’m trying to do. Any advice here would be appreciated.
With regard to shapes, I’ve found and played around with this Codepen: http://codepen.io/brian428/pen/LyjeWK?editors=0010#0
The issue with drawing shapes seems to arise in figuring out how to position them within the chart. If I’m capturing mouse movements to let the user adjust the shapes, I’m not sure how to “translate” the mouse movements into chart X/Y coordinate values and chart X/Y “data-ref” positions.
Same goes for the sizes/vertices of the shapes (the X1/Y1 values). All of the X/X1/Y/Y1 values are “percentage-based” (0-1), and it’s not clear how (or if?) one can convert to and from these percentage-based values.
For example, how would I translate an elipse with certain vertices and a chart X/Y position of 50, 50 into the corresponding data-relative values? Is there a way to do this (via Plotly itself, D3, or something else)?
Basically, I’m assuming that I’ll need to use D3 itself to handle the drawing while the user is doing it, but then take those shapes and transform them into something I can add to the chart config as a data-ref-positioned shape.