情节。使用带有多个绘图的滑块控件

Question

我想将滑块控件添加到我的 plotly 图表 (pic) 以同时控制所有元素。

我可以很容易地将滑块控件添加到只有一条线的图形中。在这种情况下，我将图表列表（以字典的形式）放入 data 变量中：

plotly.graph_objs.Figure（数据 = [plot1,plot2]，布局 = 布局）

而且效果很好。

---

但是为了在同一个图表上绘制多条线，我必须将带有图表的列表列表放入数据变量 ( 有我吗？):

plotly.graph_objs.Figure (数据 = [[plot1.1, plot2.1], [plot1.2, plot2.2]], layout = layout)

但 plot.ly 仍然需要字典列表。

条目应该是 dict 的子类。

---

有什么方法可以使用一个滑块控件同时控制多个元素？

import plotly
import plotly.plotly as py
import numpy as np

plotly.offline.init_notebook_mode()

exp = 2.71

N = 3

x_start = -N
x_end = N
dx = 0.1

y_start = -N
y_end = N
dy = 0.1


x_axis = np.arange(x_start, x_end, dx)
y_axis = np.arange(y_start, y_end, dy)


def pit(offset, x):
    pit1 = []
    for position in x:
        pit1.append(1 - exp**(-36 * (position - offset)**2))
    return pit1


def v_x(x):
    vx = exp**(-x**2)
    return vx


def v_y(x):
    vy = 0.5 * exp**(-x**2)
    return vy


def density(vx, vy):
    den = []
    for v1 in vx:
        row = []
        for v2 in vy:
            row.append(v1 * v2)
        den.append(row)
    return den


vx = v_x(x_axis)
vy = v_y(y_axis)

den = density(vx, vy)


def contour(step=None):
    return dict(
        type='contour',
        z=den,
        colorscale=[[0, 'rgb(255,255,255)'], [1, 'rgb(49,163,84)']],
        x=x_axis,
        y=y_axis,
    )


def vy_projection(step):
    return dict(
        visible=True,
        type='scatter',
        name=str(step),
        marker=dict(color='rgb(255,0,0)'),
        yaxis='y2',
        x=x_axis,
        y=vx * pit(step, x_axis)
    )


def vx_projection(step):
    return dict(
        visible=True,
        type='scatter',
        name=str(step),
        marker=dict(color='rgb(255,0,255)'),
        xaxis='x2',
        x=vy,
        y=y_axis
    )


trace1 = [
    [vy_projection(step), vx_projection(step)]
    for step in np.arange(-3, 3, 0.5)]

for plot in trace1[-1]:
    plot['visible'] = True

steps = []
for i in range(len(trace1)):
    step = dict(
        method='restyle',
        args=['visible', [False] * len(trace1)],
    )
    step['args'][1][i] = True
    steps.append(step)

sliders = [dict(
    active=10,
    currentvalue={"prefix": "Step: "},
    pad={"t": len(trace1)},
    steps=steps
)]

layout = dict(
    autosize=False,
    width=500,
    height=500,
    sliders=sliders,
    xaxis=dict(
        range=[-3, 3],
    ),
    xaxis2=dict(
        domain=[0.9, 1],
        showgrid=False,
        zeroline=False,
    ),
    yaxis=dict(
        range=[-3, 3],
    ),
    yaxis2=dict(
        domain=[0.9, 1],
        showgrid=False,
        zeroline=False,
    )

)
data = trace1[0]
fig = go.Figure(data=data, layout=layout)

# plotly.offline.plot(fig, filename='manipulate.html')
plotly.offline.iplot(fig)

Answer 1

这是使用滑块控件操作多条轨迹的最小工作示例。

import plotly

plotly.offline.init_notebook_mode()

trace1 = dict(
    type='scatter',
    x=[0, 1],
    y=[0, 0.5]
)
trace2 = dict(
    type='scatter',
    x=[0, 1],
    y=[0, -0.5]
)

trace3 = dict(
    type='scatter',
    x=[0, 1],
    y=[0, 1]
)
trace4 = dict(
    type='scatter',
    x=[0, 1],
    y=[0, -1]
)

steps = [None, None]
steps[0] = dict(
    method='restyle',
    args=[
        'visible', [False, True]
    ],
)
steps[1] = dict(
    method='restyle',
    args=[
        'visible', [True, False]
    ],
)

sliders = dict(
    steps=steps
)

layout = dict(
    sliders=[sliders],
    xaxis=dict(
        range=[0, 1],
    ),
    yaxis=dict(
        range=[-1, 1],
    ),
)

data = plotly.graph_objs.Data([trace1, trace2, trace3, trace4])
fig = plotly.graph_objs.Figure(data=data, layout=layout)

# plotly.offline.plot(fig, filename='manipulate.html')
plotly.offline.iplot(fig)

Answer 2

如果您使用 addTraces 方法添加跟踪，这将不起作用： https://codepen.io/anon/pen/ydMLyK

const defTraces = [{
  x: [1, 2, 3],
  y: [2, 1, 3],
  visible: true,
  line: {color: 'red'}
}, {
  x: [1, 2, 3],
  y: [3, 2, 4],
  visible: true,
  line: {color: 'green'}
}, {
  x: [1, 2, 3],
  y: [4, 3, 5],
  visible: true,
  line: {color: 'blue'}
},
{
  x: [1, 2, 3],
  y: [2, 1, 3],
  visible: true,
  line: {color: 'red'},
  xaxis: 'x2',
}, {
  x: [1, 2, 3],
  y: [3, 2, 4],
  visible: true,
  line: {color: 'green'},
  xaxis: 'x2',
}, {
  x: [1, 2, 3],
  y: [4, 3, 5],
  visible: true,
  line: {color: 'blue'},
  xaxis: 'x2',
}];

const layout = {
  xaxis: {
    range: [0, 4],
  },
  yaxis: {
    range: [0, 8],
  },
  grid: {
    rows: 1,
    columns: 2,
  },
  sliders: [{
    pad: {
      t: 30
    },
    currentvalue: {
      visible: false,
    },
    steps: [{
      label: 'red',
      method: 'restyle',
      args: ['visible', [true, false, false, true, false, false]]
    }, {
      label: 'green',
      method: 'restyle',
      args: ['visible', [false, true, false, false, true, false]]
    }, {
      label: 'blue',
      method: 'restyle',
      args: ['visible', [false, false, true, false, false, true]]
    }]
  }]
};

const traces = [];
Plotly.newPlot(graph, traces, layout);
Plotly.addTraces(graph, defTraces);
//Plotly.newPlot(graph, defTraces, layout);
graph.on('plotly_sliderchange', (event) => {
  console.log(event.slider.steps[0].args);
})