Zoomable sunburst chart shows only two layers of the hierarchy at a time in React JS

问题

I have tried many ways to convert this:- https://observablehq.com/@d3/zoomable-sunburst

into react as it's majorly using observable and runtime. That is not being converted to React.

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.

Thanks in advance

回答1:

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

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.

The next two solutions is how to avoid the import.meta

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

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

For example, change:

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

to

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

This only works if you have webpack file loader on your app.

来源：https://stackoverflow.com/questions/63292255/zoomable-sunburst-chart-shows-only-two-layers-of-the-hierarchy-at-a-time-in-reac