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

Question

我的 React 应用程序中有一个阴谋的旭日图（只是一个简单的<plot> React 组件）。默认情况下，Plotly 允许用户通过单击图表段来放大较低级别（请参见第一个链接进行演示）。当用户单击它时（同时保持图表的默认缩放行为），我想在页面其他地方显示有关“选定”部分的一些上下文数据。在 React 中解决此类问题的惯用方法是使用受控组件，其中 React 指示组件在渲染时的状态，而不是组件管理状态本身（正如 Plotly 目前默认所做的那样）。这将是理想的，因为将来我想将状态存储在 URL 中，以便可以生成指向特定项目的链接。这似乎需要：禁用默认点击行为单击片段时将所选项目存储在 React 状态（或其他位置）每次渲染图表时将选择传回 Plotly...但是在 Plotly 参考文档中似乎没有关于如何执行这些操作的任何信息。

Answer 1

可以使用该事件监视缩放行为plotly-sunburstclick。使用反应<plot>组件时，可以使用onSunburstClick（挂起的拉取请求）对其进行监视。

将导航到的段的 ID 作为属性在事件数据中nextLevel ，可用于驱动 React 行为（例如使用useState）。请注意，使用此属性很重要，而不是单击段的 ID，因为单击中心段时，图表实际上将向上导航到父级。

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

onSunburstClick={(event) => {

    doSomethingWith(event.nextLevel)

    return false

}}

level然后，您可以通过设置旭日轨迹的 属性来手动设置缩放级别data。

data={[{

    ...,

    level: /*Level from props or state*/,

    ...

}]}

缩放现在完全由 React 管理，就好像它是一个受控组件一样，但缺少最后一部分；缩放级别立即改变，没有平滑的过渡动画。transition这可以通过在 中手动指定 a 来解决layout，按照这个拉取请求。

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>

}