#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