如何从离线 plotly python jupyter notebook 中的选定点获取数据？

Question

示例代码：

from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot

import plotly.graph_objs as go

import numpy as np

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

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

data = [trace]

# Plot and embed in ipython notebook!
iplot(data, filename='basic-scatter')

[]

如何从选择中获取 x、y 数据或索引的副本？

Answer 1

因此，如果您想在 Jupyter 笔记本中使用 javascript，您有两个选择。

\n\n

使用display(HTML())jupyter笔记本内渲染html的方法，该方法在下面的示例代码中演示！

\n\n

另一种方法是使用 IPython Magic，请在此处阅读更多内容，代码将如下所示。

\n\n

\n

%%html
\n %html [--isolated] 将单元格渲染为 HTML 块

\n\n

可选参数：\n --isolated 将单元格注释为 \xe2\x80\x98isolated\xe2\x80\x99。孤立的单元格在自己的标签内呈现

\n

\n\n

%%html\n<span> naren</span>\n

\n\n

您还可以使用上述方法来呈现 HTML。

\n\n

select event请检查下面的代码，我从plotly javascript events 文档中获取了代码，并使其适用于 jupyter！

\n\n

from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot\nimport plotly.graph_objs as go\nfrom plotly import tools\nimport pandas as pd\nimport numpy as np\nfrom datetime import datetime\ninit_notebook_mode(connected=True)\nfrom IPython.core.display import display, HTML\n\n\nN = 30\nrandom_x = np.random.randn(N)\nrandom_y = np.random.randn(N)\n\n# Create a trace\ntrace = go.Scatter(\n    x = random_x,\n    y = random_y,\n    mode = \'markers\'\n)\n\ndata = [trace]\n\n# Plot and embed in ipython notebook!\nplot = plot(data, filename=\'basic-scatter\', include_plotlyjs=False, output_type=\'div\')\ndivId=plot.split("id=\\"",1)[1].split(\'"\',1)[0]\nplot = plot.replace("Plotly.newPlot", "var graph = Plotly.newPlot")\nplot = plot.replace("</script>", """\nvar graph = document.getElementById(\'"""+divId+"""\');\nvar color1 = \'#7b3294\';\nvar color1Light = \'#c2a5cf\';\nvar colorX = \'#ffa7b5\';\nvar colorY = \'#fdae61\';\n;graph.on(\'plotly_selected\', function(eventData) {\n  var x = [];\n  var y = [];\n\n  var colors = [];\n  for(var i = 0; i < N; i++) colors.push(color1Light);\n\n  eventData.points.forEach(function(pt) {\n    x.push(pt.x);\n    y.push(pt.y);\n    colors[pt.pointNumber] = color1;\n  });\n\n\n  Plotly.restyle(graph, \'marker.color\', [colors], [0]);\n});\n""")\ndisplay(HTML(plot))\n

\n