一个Jupyter笔记本电脑内注入自定义JavaScript回调到我plot.ly代码

Question

我使用plotly让我Jupyter笔记本（蟒蛇）中的图表。

它的伟大工程，我做了很多时髦的东西，但我缺少的一两件事 - 我想如果用户点击了一个数据，我的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))