Question

我想将滑块控件添加到 plotly 图形（pic）以同时控制所有元素。

我可以轻松地将滑块控件添加到只有一行的图形。在这种情况下，我将一个图表列表（以dicts的形式）放入数据变量中：

plotly.graph_objs.Figure（ data = [plot1，plot2] ，layout = layout）

它的工作非常好。

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

plotly.graph_objs.Figure（ data = [[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

如果使用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);
})

Plot.ly.使用带有多个图的滑块控件

1 个答案: