如何访问和控制 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) => {&nbsp; &nbsp; doSomethingWith(event.nextLevel)&nbsp; &nbsp; return false}}level然后，您可以通过设置旭日轨迹的 属性来手动设置缩放级别data。data={[{&nbsp; &nbsp; ...,&nbsp; &nbsp; level: /*Level from props or state*/,&nbsp; &nbsp; ...}]}缩放现在完全由 React 管理，就好像它是一个受控组件一样，但缺少最后一部分；缩放级别立即改变，没有平滑的过渡动画。transition这可以通过在 中手动指定 a 来解决layout，按照这个拉取请求。layout={{&nbsp; &nbsp; ...,&nbsp; &nbsp; transition: {&nbsp; &nbsp; &nbsp; &nbsp; duration: 1000,&nbsp; &nbsp; &nbsp; &nbsp; easing: 'cubic-in-out'&nbsp; &nbsp; },&nbsp; &nbsp; ...}}这是一个完整的示例，将缩放存储在组件状态中，以便可以显示当前 idconst MySunburst = () => {&nbsp; &nbsp; const [selected, setSelected] = useState('default id here, usually the root id')&nbsp; &nbsp; return <div>&nbsp; &nbsp; &nbsp; &nbsp; <span>Currently viewing: {selected}</span>&nbsp; &nbsp; &nbsp; &nbsp; <Plot data={[{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "sunburst",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; level: selected,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labels: // Some labels&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ids: // Some ids&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parents: // Some parents&nbsp; &nbsp; &nbsp; &nbsp; }]} layout={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: 500,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; easing: 'cubic-in-out'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }} onSunburstClick={(event) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setSelected(event.nextLevel)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false&nbsp; &nbsp; &nbsp; &nbsp; }}/>&nbsp; &nbsp; <div>}