Алгоритм построения ориентированного ациклического графа?

Я пытаюсь найти подход к рендерингу DAG чистым, строгим способом, основанным на сетке, и очень короткий.

Я хотел бы сделать что-то похожее на это:

                   ┌───────────┐      ┌───────────┐
               ┌───│     b     │─────▶│     d     │
               │   └───────────┘      └───────────┘
               │                                   
┌───────────┐  │   ┌───────────┐      ┌───────────┐
│     a     │◀─┼──▶│     c     │──┬──▶│     e     │
└───────────┘  │   └───────────┘  │   └───────────┘
               │                  │                
               │                  │   ┌───────────┐
               └──────────────────┴──▶│     f     │
                                      └───────────┘

Это будет графическое представление следующих зависимостей: d(b), b(a), e(c), f(c), c(a). (box(depends on)).

Я тщательно изучил графы «направленной силы», но это кажется ненужным, поскольку у меня есть пара ограничений: они должны быть строго на сетке и не должны быть строго иерархическими.

Альтернативные подходы, для которых мне не удалось найти адекватную документацию по разработке алгоритма компоновки, включают различные подходы к «древовидной компоновке», «схеме процесса», «схеме решения» (см. здесь)

Моя конечная цель — создать механизм компоновки для d3 (или аналогичного), который будет отображать что-то интерактивное:

пример макета из макета sketch.app

Моя лучшая рабочая теория на данный момент такова:

  1. Пройдитесь по графику и узнайте, сколько столбцов может быть, если их слишком много для области просмотра, подумайте о сворачивании элементов в крайнем левом углу.

  2. Начните размещать вещи в столбцы, размещайте вещи с самыми длинными цепочками справа, а с меньшими цепочками или без цепочек — слева.

  3. Если что-то в столбце имеет зависимость в том же столбце, переместите весь столбец влево и позвольте зависимому занять свое место.

  4. Нарисуйте линии, это должно быть легко, если алгоритм рассматривает только широкие «позиции сетки», а не абсолютные значения пикселей, должно быть легко нарисовать соединительную линию от A1 (ячейка a) до B1 (ячейка c);


                  A                   B                  C                

                            │                  │                          

                            │                  │                          
                                ┌───────────┐      ┌───────────┐          
  0                         ├───│     b     │──┼──▶│     d     │          
                            │   └───────────┘      └───────────┘          
        ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 
             ┌───────────┐  │   ┌───────────┐      ┌───────────┐          
  1          │     a     │◀─┼──▶│     c     │──┼──▶│     e     │          
             └───────────┘  │   └───────────┘  │   └───────────┘          
        ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 
                            │                  │   ┌───────────┐          
  2                         ├──────────────────┼──▶│     f     │          
                                                   └───────────┘          
                            │                  │                          

                            │                  │                          

Является ли мой подход в основном разумным? Есть ли что-то, что мне не хватает в том, как подойти к этому? Что может кто-нибудь порекомендовать для написания механизмов компоновки, таких как этот?


person Lee Hambley    schedule 25.02.2019    source источник
comment
Этот ответ на аналогичный вопрос, возможно, стоит посмотреть: stackoverflow.com/a/5030609/1869660   -  person Sphinxxx    schedule 26.02.2019