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

2022-01-21 00:00:00 python plotly jupyter-notebook

问题描述

示例代码:

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 数据或所选索引的副本?

How do I get a copy of the x,y data, or the indices from the selection?

解决方案

所以如果你想在 Jupyter 笔记本中使用 javascript，你有两个选择.

So if you want to use javascript in Jupyter notebooks you have two options.

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

Using the display(HTML()) method for rendering html inside jupyter notebook, this method is demonstrated in the below sample code!

另一种方法是使用 IPython Magic，阅读更多这里，代码会变成这样.

Another method is to use IPython Magic, read more here, the code will go something like this.

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

%%html
%html [--isolated] Render the cell as a block of HTML

可选参数:--isolated 将单元格注释为孤立".孤立的单元格在自己的标签内呈现

optional arguments: --isolated Annotate the cell as ‘isolated’. Isolated cells are rendered inside their own tag

%%html
<span> naren</span>

您也可以使用上述方法来呈现 HTML.

You can also use this above method to render the HTML.

请检查下面的代码，我从 select event 的代码" rel="nofollow noreferrer">绘制 javascript 事件文档 并使其适用于 jupyter！

Please check the below code, where I have taken the code for select event from the plotly javascript events docs and made it work for jupyter!

from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
import plotly.graph_objs as go
from plotly import tools
import pandas as pd
import numpy as np
from datetime import datetime
init_notebook_mode(connected=True)
from IPython.core.display import display, HTML


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!
plot = plot(data, filename='basic-scatter', include_plotlyjs=False, output_type='div')
divId=plot.split("id="",1)[1].split('"',1)[0]
plot = plot.replace("Plotly.newPlot", "var graph = Plotly.newPlot")
plot = plot.replace("</script>", """
var graph = document.getElementById('"""+divId+"""');
var color1 = '#7b3294';
var color1Light = '#c2a5cf';
var colorX = '#ffa7b5';
var colorY = '#fdae61';
;graph.on('plotly_selected', function(eventData) {
  var x = [];
  var y = [];

  var colors = [];
  for(var i = 0; i < N; i++) colors.push(color1Light);

  eventData.points.forEach(function(pt) {
    x.push(pt.x);
    y.push(pt.y);
    colors[pt.pointNumber] = color1;
  });


  Plotly.restyle(graph, 'marker.color', [colors], [0]);
});
""")
display(HTML(plot))

相关文章