React Nivo 工具提示不适用于某些图表

Question

我正在使用 Nivo ResponsivePie 来显示一些数据，除工具提示外，一切似乎都正常。工具提示只是没有显示。我有一个热图和条形图，其中有一个有效的工具提示。我直接从文档中复制了代码 https://nivo.rocks/pie

折线图也有同样的问题。

当我检查开发工具时，我看到 <path d=".."/> 在图表上移动时动态更新，但样式标签中没有像其他图表那样弹出任何内容
（像这样

<div style="pointer-events: none; position: absolute; z-index: 10; top: 0px; left: 0px; transform: translate(279.312px, 157px);"><div style="background: white; color: inherit; font-size: inherit; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px; padding: 5px 9px;"><div style="white-space: pre; display: flex; align-items: center;"><span style="display: block; width: 12px; height: 12px; background: rgb(247, 251, 255); margin-right: 7px;"></span><span>approach - Sun 08/01: <strong>20</strong></span></div></div></div>

)

Answer 1

问题

原来是版本问题。我运行 npm ls 发现：

├── @nivo/bar@0.72.0
├── @nivo/core@0.73.0
├── @nivo/heatmap@0.72.0
├── @nivo/line@0.73.0
├── @nivo/pie@0.73.0
├── @nivo/tooltip@0.72.0

所有工具提示损坏的模块都在运行 0.73.0

修复

我运行

npm uninstall @nivo/pie
npm uninstall @nivo/core
npm uninstall @nivo/line

然后

npm install @nivo/core@0.72.0 --legacy-peer-deps
npm install @nivo/pie@0.72.0 --legacy-peer-deps
npm install @nivo/line@0.72.0 --legacy-peer-deps

React Nivo 工具提示不适用于某些图表

React Nivo tooltip not working on some graphs

javascript

css

reactjs

nivo-react

问题

修复