我正在使用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 库,因此我确信只要我知道如何传递它,它就可以执行我的代码。
最佳答案
只需几个步骤即可获得与您想要的类似的东西:
- 从plotly获取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))
关于javascript - 将自定义 Javascript 回调注入(inject) Jupyter Notebook 中的plot.ly 代码中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51401903/