可缩放的旭日形图在React JS中一次仅显示层次结构的两层 [英] Zoomable sunburst chart shows only two layers of the hierarchy at a time in React JS

问题描述

我已经尝试了多种方法来转换它:- 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中一次仅显示层次结构的两层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！