Прямые ребра дендрограммы D3
Просматривая документация по d3.cluster() я не увидел ничего, что разработчик может использовать для установки типа соединительной линии. Кажется, что есть только соединение типа изогнутого сплайна, но это не самый обычный стиль для дендрограмм - по крайней мере, для моей ситуации. Мне нужны вертикально ориентированные узлы, соединенные под углом 90 градусов:
Вопрос
Судя по документации, прямого встроенного решения нет, но есть ли что-то, что d3.cluster() может предложить для достижения вышеуказанного результата? Или мне лучше кодировать все с нуля?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Эта проблема уже задавалась в "d3js Древовидный квадрат". Однако на самом деле я не считаю это дубликатом, поскольку в этом старом вопросе использовался D3 v3 и, как оказалось, его нелегко адаптировать к v5. Кроме того, вы явно запрашиваете вертикальную компоновку.
Тем не менее, основной подход остается прежним: просто используйте генератор настраиваемых путей. Основываясь на старой v3 Блокировать, это можно сделать следующим образом:
svg.selectAll(".link")
.data(root.links())
.enter().append("path")
.attr("d", elbow); // Appended paths use the custom path generator.
// Custom path generator
function elbow(d) {
return "M" + d.source.x + "," + d.source.y + "H" + d.target.x + "V" + d.target.y;
}
С небольшими изменениями для работы с v5 API демонстрацию Майка Бостока можно переписать как Вертикальная дендрограмма «локоть».
Обратите внимание, что это тот же подход, который Майк Босток использовал в своей записной книжке Древо жизни, где он использовал несколько настраиваемых генераторов путей для создания радиальных макетов.