Макет связок

Справочник API ▸ Макеты ▸ Макет связок

Реализует алгоритм иерархического связывания рёбер Данни Холтена алгоритм. Для каждой входной связи вычисляется путь, проходящий через дерево, вверх по иерархии родителей до наименьшего общего предка, а затем вниз до целевого узла. Эту последовательность узлов можно использовать совместно с другими иерархическими макетами, такими как кластерный, для генерации связных сплайнов между узлами:

Например, рассмотрите эту визуализацию зависимостей программного обеспечения.

d3.layout.bundle()

Создаёт новый макет связок по умолчанию. В настоящее время макет связок является бессостоятельным и, следовательно, имеет только конфигурацию по умолчанию. Возвращаемый объект макета является одновременно объектом и функцией. То есть: вы можете вызвать макет как любую другую функцию, и макет имеет дополнительные методы, которые изменяют его поведение. Как и другие классы в D3, макеты следуют методу цепочки вызовов методов, где методы-установщики возвращают сам макет, что позволяет вызывать несколько установщиков в одном компактном операторе.

bundle(links)

Оценивает макет связок на указанном массиве связей, возвращая вычисленный путь от источника к цели через наименьшего общего предка. Каждая входная связь должна иметь два атрибута:

• source - исходный узел.
• target - целевой узел.

Кроме того, каждый узел должен иметь один атрибут:

• parent - родительский узел.

Это подмножество полей, сгенерированных иерархическими макетами. Результат работы макета — массив путей, где каждый путь представляется массивом узлов. Таким образом, макет связок не вычисляет непосредственно базовые сплайны; вместо этого он возвращает массив узлов, которые неявно представляют точки управления сплайна. Вы можете использовать этот массив совместно с d3.svg.line или d3.svg.line.radial, чтобы сгенерировать сами сплайны. Например, если вы использовали кластер:

var cluster = d3.layout.cluster()
    .size([2 * Math.PI, 500]);

Подходящий генератор линий для иерархического связывания рёбер может быть таким:

var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(.85)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x; });

Макет связок разработан для работы совместно с режимом интерполяции «связка» генератора линий, хотя технически вы можете использовать любой интерполятор или генератор форм. Параметр силы связки Холтена представлен как напряжение линии.