Hi , I am new to plotly.js and working on scatter3D plot.
When I use basic scatter no matter the mode , the click mode only work on markers not the line.
however , when I use scatter3D the click work both on markers and line.
I got something like the following . and I expect the click only work on the markers and open the URL’s .
Thanks a lot .
from plotly.offline import plot
import pandas as pd
import plotly.graph_objs as go
import re
data = [
go.Scatter3d(
x=[0, 1, 2],
y=[0, 1, 2],
z = [0,1,2],
mode='markers',
marker=dict(
size=14
),
name='mapbox 1',
text=['Montreal'],
customdata=['https://www.baidu.com', 'http://www.fabricschina.com.cn/', 'https://www.zhihu.com']
),
go.Scatter3d(x=[0, 1, 2],
y=[0, 1, 2],
z = [0,1,2],
mode='lines',
opacity =0.5,
line=dict(color='rgb(200,200,200)', width=1),
hoverinfo='none'
)
]
print(data)
# Build layout
layout = go.Layout(
hovermode='closest',
)
# Build Figure
fig = go.Figure(
data=data,
layout=layout,
)
# Get HTML representation of plotly.js and this figure
plot_div = plot(fig, output_type='div', include_plotlyjs=True)
# Get id of html div element that looks like
# <div id="301d22ab-bfba-4621-8f5d-dc4fd855bb33" ... >
res = re.search('<div id="([^"]*)"', plot_div)
div_id = res.groups()[0]
# Build JavaScript callback for handling clicks
# and opening the URL in the trace's customdata
js_callback = """
<script>
var plot_element = document.getElementById("{div_id}");
plot_element.on('plotly_click', function(data){{
console.log(data);
var point = data.points[0];
if (point) {{
console.log(point.customdata);
window.open(point.customdata);
}}
}})
</script>
""".format(div_id=div_id)
# Build HTML string
html_str = """
<html>
<body>
{plot_div}
{js_callback}
</body>
</html>
""".format(plot_div=plot_div, js_callback=js_callback)
# Write out HTML file
with open('hyperlink_fig.html', 'w') as f:
f.write(html_str)