问题描述
我已经尝试了多种方法来转换它:- https://observablehq.com/@d3/zoomable-sunburst
I have tried many ways to convert this:-https://observablehq.com/@d3/zoomable-sunburst
主要通过 observable 和 runtime 做出反应.那还没有被转换成React.
into react as it's majorly using observable and runtime. That is not being converted to React.
在此同时也使用了一些helper.js.代码在这里 https://observablehq.com/@d3/zoomable-sunburst
It's using some helper.js as well in this. Code is here https://observablehq.com/@d3/zoomable-sunburst
是否有任何人可以提出的想法或建议.
Is there any idea that anyone can give or any suggestion to do it.
预先感谢
推荐答案
操作已到达Observablehq论坛.如果您需要将Observablehq笔记本嵌入到React应用程序中的帮助，这里有一些有关问题答案的见解.
The op has reached to Observablehq forum. Here are some insights on the answer for the problem in case you need help embedding an Observablehq notebook into a React application.
https://talk.observablehq.com/t/zoomable-sunburst-d3-chart-with-react/3686/22
总而言之，Observablehq笔记本使用现代的 import.meta 语法. create-react-app 捆绑并使用webpack/babel转换代码，它目前不支持该语法.您可以弹出，编辑和添加webpack/babel插件来支持 import.meta .
In summary, Observablehq notebook use a modern import.meta syntax. create-react-app bundles and transform your code using webpack/babel, it currently doesn't support that syntax. You could eject, edit and add a webpack/babel plugin to support import.meta.
接下来的两个解决方案是如何避免 import.meta
The next two solutions is how to avoid the import.meta
下载结束后，使用绝对路径而不是相对路径将笔记本源代码编辑到您的 src/文件夹中.Mike Bostock进行了工作演示 https://github.com/observablehq/react-zoomable-sunburst
Download end edit the notebook source code to your src/ folder, using absolute path rather the relative path. Mike Bostock made a working demo https://github.com/observablehq/react-zoomable-sunburst
将笔记本源代码下载到您的 src/文件夹中，并编辑 cost fileAttachments new URL 引用，以引用 require .Webpack加载程序将复制并链接更正的文件
Download the notebook source code to your src/ folder and edit cost fileAttachments new URL references to require. Webpack loaders will copy and link the corrected file
例如，更改:
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 文件加载器时，此方法才有效.
This only works if you have webpack file loader on your app.
这篇关于可缩放的旭日形图在React JS中一次仅显示层次结构的两层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！