드래그 가능한 플롯 객체를 만드는 방법

면책 조항 : 저는 Dash에 대한 경험이 많지 않지만 이동식 모양을 구현할 수있는 유일한 방법이었습니다. 나는 Plotly Community 포럼에서 chriddyp 의이 답변에 크게 의존했습니다 . 의 매개 변수는 dcc.Graph꽤 유사하다 go.Figure.

주의 할 점은 커서가있는 경우에만 있다는 것입니다 매우 내부 형상에 당신이 그것을 드래그 할 수 있지만 가져가 다른 곳 가까이 테두리, 클릭을하면 경우에하는 수도, 이동하지 말고, 당신의 도형의 크기를 변경합니다 드래그 또는 당신이 추구하는 행동이 아닐 수도 있습니다. Dash를 정기적으로 사용하는 사람은 누구나 필요에 따라 제 답변을 업데이트 / 개선 할 수 있습니다.

import numpy as np

import json
from textwrap import dedent as d
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

# generate data, set seed for reproducibility
np.random.seed(42)
data = np.random.normal(0,10,500)

app = dash.Dash(
    __name__,
    external_stylesheets=[
        'https://codepen.io/chriddyp/pen/dZVMbK.css'
    ]
)


styles = {'pre': {'border': 'thin lightgrey solid', 'overflowX': 'scroll'}}

app.layout = html.Div(className='row', children=[
    dcc.Graph(
        id='basic-interactions',
        className='six columns',
        figure={
            'data': [{
                'x': data,
                'name': 'Trace 1',
                'type': 'histogram'
            }],
            'layout': {
                'shapes': [{
                    'type': 'rect',
                    'x0': -22,
                    'x1': 22,
                    'xref': 'x',

                    'y0': 0,
                    'y1': 50,
                    'yref': 'y',

                    'fill': 'toself',
                    'line': dict(
                        color="Gray",
                        width=0.5,
                    ),
                    'fillcolor': 'Gray',
                    'layer': 'below'
                }]
            }
        },
        config={
            'editable': True,
            'edits': {
                'shapePosition': True
            }
        }
    ),
])

if __name__ == '__main__':
    app.run_server(debug=True)