#javascript #d3.js #graph #three.js #environment
Вопрос:
Я знаю javascript только с точки зрения веб-браузера, но мне нужно отображать данные в Интернете так, как это делает этот веб-компонент: https://github.com/vasturiano/3d-force-graph
Дело в том, что инструкции по настройке там совсем не дружелюбны к новичкам. Это предполагает некоторые базовые и продвинутые знания. Поэтому я провел некоторое исследование, и хотя все, кто говорит об этом компоненте, говорят, что его очень легко реализовать, никто из них не говорит, как это сделать.
Я как бы предполагаю, что должен быть задействован какой-то сервер javascript (node.js ?). Что Three.js и d3-force-3d должен быть импортирован (как-то, где-то). Но это все. Я даже не уверен, что этого достаточно. Но я просто не могу понять, как настроить все это так, чтобы я мог запустить один из этих сценариев.
Итак, может ли кто-нибудь просто дать мне подсказки на уровне новичка, чтобы я мог работать с этими сценариями? Потому что на данный момент я готов искать, но я не знаю, что именно искать. Мне не хватает общей картины, в то время как информация в ссылке очень конкретна и не очень подробна.
Я искал в Интернете два дня, но там мало что можно найти о 3d-графике силы, и нет никакой информации о том, как его настроить.
Все, что мне нужно, — это мост с точки зрения информации, чтобы эти сценарии могли быть настроены и запущены (с пользовательскими данными) не экспертом. Я имею в виду, какую среду, какие библиотеки/зависимости, что импортировать, как импортировать и т. Д. Не обязательно подробно, так как любая помощь была бы хорошей отправной точкой.
Спасибо.
Ответ №1:
Я смог запустить базовый пример, просто создав файл .html и поместив его на веб-сервер. Поэтому, если вы возьмете основной пример (https://github.com/vasturiano/3d-force-graph/blob/master/example/basic/index.html) и загрузите содержимое этого файла на свой веб-сервер разработки.
Таким index.html образом, файл будет выглядеть следующим образом:
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/3d-force-graph"></script>
</head>
<body>
<div id="3d-graph"></div>
<script>
// Random tree
const N = 300;
const gData = {
nodes: [...Array(N).keys()].map(i => ({ id: i })),
links: [...Array(N).keys()]
.filter(id => id)
.map(id => ({
source: id,
target: Math.round(Math.random() * (id-1))
}))
};
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.graphData(gData);
</script>
</body>
Просто откройте его в своем браузере, и он должен работать.
Что касается зависимостей, похоже, вам нужно импортировать только одну, существуют различные варианты импорта (упомянутые здесь https://github.com/vasturiano/3d-force-graph#quick-start), способ его импорта будет зависеть от вашей среды разработки.
Комментарии:
1. Большое вам спасибо за ваш ответ, это действительно полезно, и я действительно мог бы отобразить файл примера. Я даже не надеялся, что все будет так прямолинейно. Большое спасибо! Я собираюсь проверить, как я могу удаленно изменить стиль (фон, видимую подпись и т. Д.). Я думаю, что если бы вы могли изменить некоторые атрибуты конфигурации, надеюсь, стиль и подписи также можно было бы изменить. Я этим занимаюсь !
2. Я смог изменить необходимый минимум и вставить свои собственные значения, так что я очень счастлив и очень вам благодарен. Теперь я пытаюсь извлечь из этого максимум пользы. Я действительно думал, что мне нужно будет установить какой-нибудь локальный сервер, установить и импортировать материалы, отредактировать все это, а затем упаковать в качестве компонента. Это оказалось неожиданно проще, благодаря вам. Береги себя!
3. Я действительно рад, что это помогло