Масштабируемая диаграмма солнечных лучей показывает только два уровня иерархии одновременно в React JS - PullRequest
Новая
       132

Масштабируемая диаграмма солнечных лучей показывает только два уровня иерархии одновременно в React JS

0 голосов
/ 07 августа 2020

Я пробовал много способов преобразовать это: - https://observablehq.com/@d3 / zoomable-sunburst

в реакцию, поскольку он в основном использует observable и runtime. Он не конвертируется в React.

Он также использует некоторый помощник. js. Код здесь https://observablehq.com/@d3/zoomable-sunburst

Есть ли какие-либо идеи, которые кто-то может дать, или какие-либо предложения по этому поводу.

Заранее спасибо

1 Ответ

0 голосов
/ 13 августа 2020

Опера дошла до форума Observablehq. Вот некоторые идеи для решения проблемы на случай, если вам понадобится помощь во встраивании записной книжки Observablehq в приложение React.

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.

Следующие два решения - как избежать import.meta

Скачать и отредактировать исходный код записной книжки, чтобы ваша папка src/, используя абсолютный путь, а не относительный путь. Майк Босток сделал рабочую демонстрацию 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 файловый загрузчик в вашем приложении.

...