带ipywidgets和plotly v4的Jupyter？

Question

在Windows10上使用Anaconda安装中的Jupyter；也安装了conda install -c plotly plotly，显然得到了精心设计的v4。在

我只想从一个简单的例子开始-使用ipywidget滑块而不是绘声绘色的滑块。所以，我发现：

https://moderndata.plot.ly/widgets-in-ipython-notebook-and-plotly/

EXAMPLE 3: interact

A simple example of using the interact decorator from ipywidgets to create a simple set of widgets to control the parameters of a plot.

Link to IPython notebook

对-所以我去了那个链接，把代码重新组织成这样：

import plotly.graph_objs as go
import numpy as np
from ipywidgets import interact

fig = go.FigureWidget()
scatt = fig.add_scatter()

xs=np.linspace(0, 6, 100)
fig.show()

@interact(a=(1.0, 4.0, 0.01), b=(0, 10.0, 0.01), color=['red', 'green', 'blue'])
def update(a=3.6, b=4.3, color='blue'):
    with fig.batch_update():
        scatt.x=xs
        scatt.y=np.sin(a*xs-b)
        scatt.line.color=color

。。。当我运行这个单元格时，它会画出一个空白图：

。。。失败的原因是：

^{pr2}$

显然，这是因为Plotly v4中有足够多的更改来保证Version 4 migration guide | plotly；浏览这些内容，我尝试修改代码如下：

import plotly.graph_objs as go
import numpy as np
from ipywidgets import interact

fig = go.FigureWidget()
scattf = fig.add_scatter()
scatt = scattf.data[-1]

xs=np.linspace(0, 6, 100)
scattf.show()

@interact(a=(1.0, 4.0, 0.01), b=(0, 10.0, 0.01), color=['red', 'green', 'blue'])
def update(a=3.6, b=4.3, color='blue'):
    with fig.batch_update():
        scatt.x=xs
        scatt.y=np.sin(a*xs-b)
        scatt.line.color=color

。。。现在我再也看不到错误了，但是绘图仍然是空的，当我拖动滑块时，它不会更新。在

有人能告诉我，如何让这个例子工作，以便绘图，并更新/重画时，我拖动滑块？在

---

编辑：再乱一点，现在我有了这个代码：

import plotly.graph_objs as go
import numpy as np
from ipywidgets import interact

fig = go.FigureWidget()
scattf = fig.add_scatter()
scatt = scattf.data[-1]

xs=np.linspace(0, 6, 100)
#scattf.show() # adds extra plot, if there is scattf.show() in update()!

@interact(a=(1.0, 4.0, 0.01), b=(0, 10.0, 0.01), color=['red', 'green', 'blue'])
def update(a=3.6, b=4.3, color='blue'):
    with fig.batch_update():
        scatt.x=xs
        scatt.y=np.sin(a*xs-b)
        scatt.line.color=color
        scattf.show()

update() # update once; so we don't get empty plot at start? not really - still getting empty plot at start, and another one after which is updated

这里有两个问题：

• 运行单元格后，第一个绘图为空，而另一个绘图为已打印-如何才能使它仅用默认值绘制一个绘图？（没有最后一个update()，只有一个绘图，但在开始时是空的-必须拖动滑块才能开始绘制）
• 当拖动滑块时，绘图现在会改变-但是它会闪烁很多；有什么方法可以减少闪烁？在

Answer 1

对，所以找到了Interactive Data Analysis with FigureWidget ipywidgets-并相应地重写了该示例；这有更平滑的响应，并且没有双重绘制-但是，我仍然不确定这是否是一种方法；因此，如果有人知道得更好，请发布。。。在

import plotly.graph_objs as go
import numpy as np
#from ipywidgets import interact, interactive
from ipywidgets import widgets
from IPython.display import display

aSlider = widgets.FloatSlider(
    value=2.0,
    min=1.0,
    max=4.0,
    step=0.01,
    description='a:',
    continuous_update=False
)

bSlider = widgets.FloatSlider(
    value=1.0,
    min=0.0,
    max=10.0,
    step=0.01,
    description='b:',
    continuous_update=True
)

colorDropdown = widgets.Dropdown(
    description='Color:',
    value='blue',
    options=['red', 'blue', 'green']
)

fig = go.FigureWidget()
#fig.show()
scattf = fig.add_scatter()
scatt = scattf.data[-1]

xs=np.linspace(0, 6, 100)

def response(change):
    with fig.batch_update():
        fig.data[0].x=xs
        fig.data[0].y=np.sin(aSlider.value*xs-bSlider.value)
        fig.data[0].line.color=colorDropdown.value
        fig.layout.xaxis.title = 'whatever'

aSlider.observe(response, names="value")
bSlider.observe(response, names="value")
colorDropdown.observe(response, names="value")

response("doesn't matter what I send here, just triggering") # MUST be before widgets.VBox - if response(x) is last, NOTHING is drawn! 

widgets.VBox([aSlider,
              bSlider,
              colorDropdown,
              fig])

Answer 2

在Jupyter notebook或JupyterLab环境中，您可以这样做：

import numpy as np
import plotly.graph_objects as go
from ipywidgets import interact

xs=np.linspace(0, 6, 100)

fig = go.FigureWidget()
fig.add_scatter()

@interact(a=(1.0, 4.0, 0.01), b=(0, 10.0, 0.01), color=['red', 'green', 'blue'])
def update(a=3.6, b=4.3, color='blue'):
    with fig.batch_update():
        fig.data[0].x=xs
        fig.data[0].y=np.sin(a*xs-b)
        fig.data[0].line.color=color
fig