Вы можете визуализировать любой график с помощью чистого javascript！ Это руководство не предназначено для визуализации схемы, его можно применить к любому графу, который вы хотите.

Что такое AAG-Visualizer? Это элегантный визуализатор, который может конвертировать сложный формат схемы, такой как AIGER (трудный для понимания человеком), в простой и красивый .svg одним щелчком мыши.

Вдохновленный финальным проектом «Fraig» раздела Структура данных и программирование (проведенного профессором Риком Хуангом) на факультете электротехники Тайваньского национального университета.

Краткое введение Fraig и AAG

Что делает FRAIG?

Он функционально сокращает график И-инвертора, делая схему как можно меньше.

Все еще не знаете, что это? Посмотрите картинку ниже, и вы все поймете.

Что такое AAG?

Это выглядит так:

aag 8 2 0 2 2
2
4
9
10
8 3 16
10 5 2
c
generated by Byron Hsu

Подробнее см. Краткое руководство по формату Aiger.

Необязательно разбираться в этом досконально. Что вам нужно знать, так это то, что это просто формат And-Inverter Graph.

Хорошо, давайте перейдем к теме. Как мне преобразовать .aag в .svg в браузере?

Структура приложения

.
├── .gitignore
├── README.md
├── package.json
├── public
│   ├── bundle.js
│   ├── index.html
│   └── assets/
├── server
│   ├── config.js
│   └── server.js
├── src
│   ├── assets
│   ├── js
│   │   └── animate.js
│   │   └── parser.js
│   ├── scss
│   │   └──  index.scss
│   ├── index.js
│   └── template.html
├── webpack.dev.config.js
└── webpack.prod.config.js

Viz.js

Краткое введение в Viz.js

Этот проект представляет собой Makefile для создания Graphviz с Emscripten и простую оболочку для его использования в браузере - супербыстрый и удобный способ рисования графиков в браузере. Если вы хотите узнать больше о Viz.js, загляните в официальную документацию.

  • Установить
npm install viz.js
  • Базовое использование в javascript
// format ofi .dot
let digraph = 'digraph { a -> b; }';
// for svg
let svgXml = Viz(digraph, { format: "svg"});
document.body.innerHtml = svgXml;
// for img-element
let img-element = Viz(digraph, { format: "png-image-element"});
document.body.append(img-element);
  • Настройка

Что еще? Вы можете настроить цвет узла, ширину вершины и т. Д. На графике. Просто засучите рукава и измените стиль по своему желанию. См. документацию здесь.

Это так просто.

Теперь нам нужно только проанализировать наш ввод в файл .dot. И мы видим, как наша строка волшебным образом превращается в красивую схему .svg!

Парсер

  • parser.js

Используйте мощь regexp в javascript, и вы легко сможете разобрать что угодно. Просмотрите этот фантастический учебник: JavaScript: изучение регулярных выражений для начинающих.

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

//parser.js
function parser(args...){
}
export default parser;

Комбинировать

import parser from './js/parser.js'
// format of .dot
let digraph = parser(data);
//for svg
let svgXml = Viz(digraph, { format: "svg"});
document.body.innerHtml = svgXml;
//for img-element
let img-element = Viz(digraph, { format: format: "png-image-element"});
document.body.append(img-element);

Наслаждайтесь фантастической графикой, которую вы строите!

Animate.css

Краткое введение в animate.css

Очень простая библиотека для создания фантастической анимации на dom-объекте. Если вы хотите узнать больше о a nimate.css, загляните в официальную документацию.

  • Установить
<head>
  <!-- animate.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <!-- jquery -->
  <script
	src="https://code.jquery.com/jquery-3.1.1.min.js"
	integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
	crossorigin="anonymous"></script>
</head>
  • Основное использование
// animate.js
$.fn.extend({
    animateCss: function (animationName, callback) {
        let animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        this.addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
            if (callback) {
              callback();
            }
        });
        return this;
    }
});
// index.js
// load animate.js in advance for repeated animation
import './js/animate.js'
document.getElementById('container').animateCss('shake');

Реализация

Моя цель - добавить анимацию «встряхивания» на кнопке визуализации при неправильном формате. И добавьте к нему анимацию «сжатия», когда он будет успешно визуализирован.

Как это сделать? Это невероятно просто. Вам не нужно писать много ключевых кадров и какие-то раздражающие вещи. Просто позвоните animateCss, и волшебство произойдет.

  • Кнопка "Визуализировать"
// index.js
function handleFileSelected(event) {
	...
	if(input.files.length === 0) { // no file in <input>
		$('#btn').animateCss('shake');
		return;
	}else
	if(!/.aag/g.test(input.files[0].name)){ // format is wrong
		$('#btn').animateCss('shake');
		return;
	}
	...
	// Right format and ready to visualize
	$('#btn').animateCss('rubberBand');
}
document.getElementById('btn').addEventListener('click', handleFileSelected);

Напишите 10 строк кода и произведите впечатление на всех пользователей, которые зайдут на ваш сайт. Почему нет ?

❤ Если этот пост был полезен, ударьте сердечко!

И не забудьте поставить звездочку моему репо ✨: AAG-Visualizer.

Приветствуется любой пиар и выпуск!

Вы можете клонировать из Github, загрузить любой файл .aag в папки с примерами и дождаться волшебных моментов.

git clone https://github.com/ByronHsu/AAG-Visualizer.git

Надеюсь, ты повеселишься!

Моя ссылка на GitHub: https://github.com/ByronHsu/