本文介绍了可缩放的旭日形图在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中一次仅显示层次结构的两层的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-01 00:02