如何使用plotly / Python / Dash从原点到用户的鼠标坐标以图方式绘制一条线

Question

I want to plot a line from origin (0,0) to the mouse coordinates (x,y) of the user. My plan is to use the mouse coordinates of the user and to use the @app.callback method to update the graph. My main problem is in getting the mouse coordinates of the user. I'm using plotly, dash and python.

I found a method to get the mouse coords on the plotly community ( https://community.plot.ly/t/how-to-make-shape-track-mouse-motion/1604 ), code posted by etienne at https://codepen.io/etpinard/pen/EyydEj . The main function seems to be to the p2c part

gd.addEventListener('mousemove', function(evt) {
var xInDataCoord = xaxis.p2c(evt.x - l);
var yInDataCoord = yaxis.p2c(evt.y - t);

However, this is in JavaScript and I want to implement this using python and I can not find a similar method in Python.

Any solution?

Answer 1

An useful package to get the actual mouse position within dash is the package mydcc

At first you need to import it within your script:

import mydcc

With that you can define listeners:

app.layout = html.Div([
        mydcc.Listener( id = "listener", aim = 'graph' ),
        dcc.Graph(id='graph')
    ])

The callback can be handled eg by this:

@app.callback(Output('graph', 'figure'),
              [Input('uuu', 'data')])
def update_graph(mouseData):
    if mouseData:
        x_data = [0, mouseData['x']]
        y_data = [0, mouseData['y']]
    else:
        x_data = [0, 10]
        y_data = [0,20]

    #... some code for your figure

    return {'data': data, 'layout': layout}