如何在 React 中访问和控制 plotly.js 旭日形图表中的选定部分

Question

我有一个 plotly sunburst chart in my React app (just a simple <plot> react component)。默认情况下，Plotly 允许用户通过单击图表段来放大较低级别（请先查看 link 进行演示）。

我想在用户单击时在页面其他位置显示有关“选定”部分的一些上下文数据（同时保持图表的默认缩放行为）。

在 React 中解决此类问题的惯用方法是使用 controlled component，其中 React 指示组件在渲染时的状态，而不是组件管理状态本身（如 Plotly 目前所做的那样）默认情况下）。

这将是理想的，因为将来我想将状态存储在 URL 中，以便可以为特定项目生成 links。

这似乎需要：

禁用默认点击行为
当一个片段被点击时，将所选项目存储在 React 状态（或其他地方）
每次渲染图表时将选择传回 Plotly

...但是在 Plotly 参考文档中似乎没有关于如何执行这些操作的任何信息。

Answer 1

可以使用 plotly-sunburstclick 事件监视缩放行为。使用 react <plot> 组件时，可以使用 onSunburstClick (pending pull request).

进行监控

将导航到的段的 ID 在事件数据中作为 nextLevel property，可用于驱动 React 行为（例如使用 useState）。 请注意，使用此属性很重要，并且不是单击的部分的 ID，因为单击中间部分时，图表将实际导航上升到 parent.

开始将缩放级别完全置于 React 的控制之下 return false 来自 sunburstclick 事件处理程序。这将阻止 plotly 执行缩放本身。 请注意，这也会阻止常规 onClick/plotly_click 触发。

onSunburstClick={(event) => {
    doSomethingWith(event.nextLevel)
    return false
}}

然后您可以通过设置朝阳轨迹 data.

的 level 属性来手动设置缩放级别

data={[{
    ...,
    level: /*Level from props or state*/,
    ...
}]}

缩放现在完全由 React 管理，就好像它是一个受控组件一样，但缺少最后一块；缩放级别立即改变，没有平滑的过渡动画。这可以通过根据 this pull request.

在 layout 中手动指定 transition 来解决

layout={{
    ...,
    transition: {
        duration: 1000,
        easing: 'cubic-in-out'
    },
    ...
}}

这里是一个完整的例子，将缩放存储在组件状态中，以便可以显示当前id

const MySunburst = () => {
    const [selected, setSelected] = useState('default id here, usually the root id')

    return <div>
        <span>Currently viewing: {selected}</span>
        <Plot data={[{
            type: "sunburst",
            level: selected,
            labels: // Some labels
            ids: // Some ids
            parents: // Some parents
        }]} layout={{
            transition: {
                duration: 500,
                easing: 'cubic-in-out'
            }
        }} onSunburstClick={(event) => {
            setSelected(event.nextLevel)
            return false
        }}/>
    <div>
}

如何在 React 中访问和控制 plotly.js 旭日形图表中的选定部分

How do I access & control the selected segment in a plotly.js sunburst chart in React

javascript

selection

zooming

reactjs

plotly.js