Рисование дерева JSON с помощью Canvas или SVG

#javascript #json #canvas #svg #draw

#javascript #json #холст #svg #рисовать

Вопрос:

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

Таблица переходов

Если я проверю слово «ab», это создаст объект json с этим:

 {
 "a": {
      "0": {
           "b": [
                "0",
                "1",
                "2"
                ]
            },
      "3": {
           "b": false
            }
        }
 }
  

Итак, реальный вопрос заключается в том, как перейти от этого JSON

Для этого:

Пример окончательного рисования

Здесь вы можете увидеть, какие все сгенерированные пути, я просто подсчитываю общее количество конечных состояний, и это указывает, является ли это допустимым словом, поэтому все пути должны быть нарисованы, а также правильные пути (те, которые заканчиваются в конечном состоянии) должны быть отмечены по-разному, чтобы было легкосмотрите.

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

Я хотел бы сделать это с помощью Canvas или SVG, но я не очень представляю, как я могу это сделать, это будет бесплатный инструмент для изучения того, как работают машины с состояниями.

Спасибо за вашу помощь !.

Комментарии:

1. Это довольно широкий вопрос. Вы можете сделать это с нуля (я бы лично рекомендовал использовать SVG, а не Canvas), или вы можете использовать библиотеку, такую как Raphael.js или D3.js (или, вероятно, многие другие).

2. Если у вас есть время для обучения, ознакомьтесь с библиотекой d3