Основным источником решений D3js является observableHq.com, но кажется невозможным (?) повторно использовать алгоритмы путем копирования/вставки... Так ли это? Даже при проверке руководств подобных этому не существует простых способ (с меньшим количеством подключаемых модулей или затрат времени программиста!) для проверки и повторного использования.
Пример: мне нужен свежий алгоритм D3js v5 2020 года для визуализации дерева с отступами, и есть хорошее решение: observableHq.com/@d3/indented-tree.
Загрузка бесполезна, поскольку основана на сложном классе времени выполнения...
Но, кажется, простой алгоритм построения диаграмм,
chart = { // the indented-tree algorithm
const nodes = root.descendants();
const svg = d3.create("svg")// ...
// ...
return svg.node();
}
Могу ли я простым человеческим шагом преобразовать его в простой HTML без сложных адаптаций, который начинается с <script src="https://d3js.org/d3.v5.min.js"></script> и заканчивается без использования класса среды выполнения?
Подробнее как пример
Представляя пошаговые инструкции для цитируемого алгоритма дерева с отступами, я не могу Finesh и нужна ваша помощь:
Предположим, вы начинаете с чистого шаблона HTML5. Например:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Indented Tree</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
function onLOAD() {
console.log("Hello onLoad!")
// all copy-paste and adaptations HERE.
console.log("!Bye!")
} // \onLOAD
</script>
</head>
<body onload="onLOAD()">
<script>
console.log("Hello!")
// global INITIALIZATIONS HERE.
</script>
</body>
</html>
Подготовьте глобальные переменные, кажется
root,nodeSize=17иwidthПодготовьте данные... Данные JSON находятся в уродливом
./files/e6537420..., я переместил в корень проекта с его настоящим именем,flare-2.json.Простой и классический способ D3js для чтения данных JSON:
d3.json("./flare-2.json").then( data=> console.log(data) );
Необходимо протестировать и проверить отсутствие ошибок CORS и т. д.Подготовьте данные как переменную
root. Все в блокdata => {}, чтобы избежать проблем с синхронизацией...
Похоже, чтоrootоснован наfunction(d3,data) { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }.Скопируйте-вставьте
chart =указанное выше, послеrootинициализации с данными....
Часто задаваемые вопросы
Вопросы и ответы в комментариях:
@Mehdi - Не могли бы вы объяснить, в чем проблема с включением тега скрипта D3 и использованием библиотеки времени выполнения в коде?
Когда исходный алгоритм ObservableHq прост, мне нужен другой способ, простой способ его повторного использования путем копирования/вставки и минимальной адаптации.
@Mehdi - Прочитали ли вы руководство по загрузке и внедрению блокнотов?
Да, никаких новостей: никаких «человеческих инструкций» о том, как повторно использовать код... Только «установить это» и «установить это». Никаких инструкций про "копировать/вставить и минимальные адаптации", которые я объяснил выше.
(@nobody) - Что вам нужно в качестве ответа?
Как я показал выше, простая удобочитаемая пошаговая процедура преобразования... В идеале конечный результат может быть протестирован, доказательство того, что он работает, например, на JSFiddle, с кодом копирования/вставки и некоторыми другими адаптационные линии, чтобы показать свою точку зрения.
