Question

我正在使用plotly在Jupyter Notebook（Python）中制作图表。

效果很好，我做了很多时髦的事情，但是我错过了一件事-当有人单击3D散点图中的一个基准（将内容复制到剪贴板中）时，我想运行我的自定义JavaScript代码。我基本上缺少一个onclick参数，可以在其中传递一些任意的JS代码。

文档中有一个tiny section on Click Events，但是所有逻辑都是在JavaScript中实现的，因此未说明如何传递。

在梦中的样子：

js_code = """ function myCallback( param ){...} """
trace = go.Scatter3d(
    x=x,
    y=y,
    z=z,
    mode='markers',
    customdata={"onclick": js_code}
)

原则上，Plotly是一个仅具有Python API的JavaScript库，因此，如果我只知道如何传递代码，我相信它可以执行我的代码。

Answer 1

要获得与您想要的东西相似的东西的步骤很少：

从图中获取HTML div
获取div ID
使用id使用Plotly JS添加事件处理程序
包括Plotly JS

代码如下：

import numpy as np
from IPython.core.display import display, HTML

N = 10
random_x = np.random.randn(N)
random_y = np.random.randn(N)

trace = go.Scatter(
    x = random_x,
    y = random_y,
    mode = 'markers'
)

data = [trace]

# get the a div
div = plot(data, include_plotlyjs=False, output_type='div')
# retrieve the div id (you probably want to do something smarter here with beautifulsoup)
div_id = div.split('=')[1].split()[0].replace("'", "").replace('"', '')
# your custom JS code
js = '''
    <script>
    var myDiv = document.getElementById('{div_id}');
    myDiv.on('plotly_click',
        function(eventdata) {{  
            alert('CLICK!');
        }}
    );
    </script>'''.format(div_id=div_id)
# merge everything
div = '<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>' + div + js
# show the plot 
display(HTML(div))

在Jupyter Notebook中将自定义Javascript回调注入我的plot.ly代码中

1 个答案: