сложная graphviz древовидная структура

Я пытаюсь создать древовидную структуру с graphviz. Я открыт или для написания graphviz кода вручную или для использования рубинового-graphviz драгоценного камня для рубина. Данный ниже изображения кто-либо может обеспечить понимание на необходимом коде? Проигнорируйте, что линии не являются прямыми..., они должны быть, когда graphviz создает график. Я открыт для наличия точек/точек, когда строки пересекаются также.

Я играл с рубином-graphviz и классом родословной... это получает меня часть пути там, но мне действительно нужны все строки, чтобы быть прямым и пересечься под прямым углом, и код out-of-the-box, кажется, не делает это.

Код должен быть достаточно общим, чтобы позволить, чтобы поле "C" имело детей также и для там также, чтобы быть большим количеством детей под "A".

Цвета не важны..., примеры могут исключить любую окраску.

http://docs.google.com/drawings/pub?id=1lUTfgKP_LN0x7C3ItbsFjfLBuDTL84AtmoaW7YFn32Y&w=1036&h=713

11
задан thomas 25 May 2010 в 23:27
поделиться

1 ответ

Насколько я знаю, это требует небольшого обхода; Я буду делать это только на языке Graphviz DOT. Сначала я дам вам решение, а затем дам некоторые объяснения того, как вы можете его расширить.

Это результирующий рисунок:

outfile.png

Это код Graphviz, создающий рисунок:

graph atree {
  Item1 [shape=none,label="Item 1",pos="2.2,1.1!"];
  Item2 [shape=none,label="Item 2",pos="2.2,0.1!"];
  Item3 [shape=none,label="Item 3",pos="2.9,-0.3!"];
  A [shape=box,color=lightblue,style=filled,pos="2,3!"];
  B [shape=box,color=lightblue,style=filled,pos="1,2.1!"];
  C [shape=box,color=lightblue,style=filled,pos="3,2.1!"];
  D [shape=box,color=lightblue,style=filled,pos="1.5,1.5!"];
  E [shape=box,color=lightblue,style=filled,pos="1.5,0.5!"];
  D0 [style=invisible,fixedsize=true,width=0,height=0,pos="2,2.5!",label=""];
  D1 [style=invisible,fixedsize=true,width=0,height=0,pos="1,2.5!",label=""];
  D2 [style=invisible,fixedsize=true,width=0,height=0,pos="3,2.5!",label=""];
  D3 [style=invisible,fixedsize=true,width=0,height=0,pos="1,1.5!",label=""];
  D4 [style=invisible,fixedsize=true,width=0,height=0,pos="1,0.5!",label=""];
  D5 [style=invisible,fixedsize=true,width=0,height=0,pos="1.5,1.1!",label=""];
  D6 [style=invisible,fixedsize=true,width=0,height=0,pos="1.5,0.1!",label=""];
  D7 [style=invisible,fixedsize=true,width=0,height=0,pos="2.2,-0.3!",label=""];
  A -- D0 -- D1 -- B -- D3 -- D4 -- E [color=blue];
  E -- D6 -- Item2 -- D7 -- Item3 [color=blue];
  D0 -- D2 -- C [color=blue];
  D3 -- D -- D5 -- Item1 [color=blue];
}

Если вы поместите его в файл с именем inputfile.dot , вы можете получить файл результирующего изображения, используя команда neato -Tpng inputfile.dot> outfile.png .

Теперь пара комментариев о том, как это работает: Код, строящий дерево с A, B, C, D, E, Item1, Item2, Item3 , прост (атрибуты просто устанавливают цвета и стили коробки). Уловка для получения прямых и ортогональных линий состоит из 1) добавления невидимых узлов с нулевым размером к графику и 2) размещения всех объектов в абсолютных координатах на холсте. Вспомогательные узлы D1, D2, D3, D4, D5, D6, D7 необходимы для шага 1), а параметры pos = "x, y!" необходимы для шага 2 ).Обратите внимание, что вам понадобится ! Знак в конце команды pos , поскольку в противном случае позиции не будут считаться окончательными, а макет все равно будет изменен.

Вы можете добавить дополнительные узлы, сначала разместив новый узел (используя код для узлов A ... Item3 в качестве шаблона), добавив невидимый вспомогательный узел (с pos таким образом, что все соединения к нему и от него ортогональны), а затем добавление соединения к графу через - - .

4
ответ дан 3 December 2019 в 06:20
поделиться
Другие вопросы по тегам:

Похожие вопросы: