Я работаю с D3 как новичок и пытаюсь выяснить, возможно ли следующее.
Я хочу два складных дерева, я думаю, на основе примера галереи:
Я хочу рисовать линии и создавать ассоциации между их узлами и третьим объектом.
Это грубый макет:
Мои недоумения на данный момент:
Да, это вполне возможно — вы даже можете использовать одну и ту же древовидную структуру для обоих, если хотите. Главное, что нужно понять, это то, что древовидная структура — это всего лишь средство получения координат узлов; это не имеет ничего общего с их рисованием. Таким образом, вы сначала запускаете макет дерева, чтобы получить эти координаты, а затем рисуете узлы на отдельном шаге.
В примере, на который вы ссылаетесь, макет вычисляется в начале функции update:
// Compute the flattened node list. TODO use d3.layout.hierarchy.
var nodes = tree.nodes(root);
// Compute the "layout".
nodes.forEach(function(n, i) {
n.x = i * barHeight;
});
Остальная часть этой функции связана только с фактическим рисованием узлов и связей. Таким образом, чтобы иметь несколько деревьев, вы должны снова запустить приведенный выше код для другого root. Это дает вам координаты для обоих деревьев, которые вы затем можете добавить к элементам контейнера, смещенным друг от друга:
var tree1 = svg.append("g");
var tree2 = svg.append("g").attr("transform", "translate(500,0)");
Обратите внимание, что вам вообще не нужно менять координаты узлов, так как они будут относиться к их контейнерам. Затем вы можете нарисовать свой центральный элемент и ссылки, идущие к нему. Единственное предостережение заключается в том, что для ссылок, начинающихся с правого дерева, вам придется сместить координаты, полученные из макета дерева, на величину смещения элемента контейнера.
