javascript - 可缩放的旭日形图在 React JS 中一次仅显示层次结构的两层

Question

进入反应，因为它主要使用observableand runtime。那没有被转换为 React。

它也使用了一些 helper.js。代码在这里https://observablehq.com/@d3/zoomable-sunburst

有没有任何人可以给出的想法或任何建议。

提前致谢

score 0 · Accepted Answer

该操作已到达 Observablehq 论坛。如果您需要帮助将 Observablehq 笔记本嵌入到 React 应用程序中，这里有一些关于问题答案的见解。

总之，Observablehq notebook 使用现代import.meta语法。create-react-app使用 webpack/babel 打包和转换您的代码，它目前不支持该语法。你可以弹出、编辑和添加一个 webpack/babel 插件来支持import.meta.

接下来的两个解决方案是如何避免import.meta

下载结束编辑笔记本源代码到您的src/文件夹，使用绝对路径而不是相对路径。Mike Bostock 做了一个工作演示https://github.com/observablehq/react-zoomable-sunburst

将笔记本源代码下载到您的src/文件夹并编辑cost fileAttachments new URL对require. Webpack 加载器将复制并链接更正后的文件

例如，更改：

const fileAttachments = new Map([["FILE_NAME.csv", new URL("./files/HASH", import.meta.url)]]);

至

const fileAttachments = new Map([["FILE_NAME.csv", require("./files/HASH")]]);

这仅webpack在您的应用程序上有文件加载器时才有效。

1 回答 1