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

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

只需几个步骤即可获得与您想要的类似的东西:

• 从 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))