Positioning user-created shapes and annotations

plotly.js
1

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.

2

To add, even just a simple example of drawing a line and being able to drag it (using the Plotly.d3 object I assume?) would provide a useful starting point. Thanks.

3

The blue line in your “Shapes” Codepen is exactly what I would like to add to one of my R Plotly graphs. Do you or anyone else on here know if this can be implemented using the R api? In a perfect world for my particular use case, the line would actually be anchored to the origin and one could drag the other endpoint however he/she chooses. Thanks for any help or suggestions!