Работя с 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)");
Имайте предвид, че изобщо не е необходимо да променяте координатите на възлите, тъй като те ще бъдат относителни към техните контейнери. След това можете да начертаете централния си елемент и връзките, водещи към него. Единственото предупреждение е, че за връзки, започващи от правилното дърво, ще трябва да изместите координатите, които получавате от оформлението на дървото, със сумата, на която елементът на контейнера е изместен.
