Структура данных 101: введение в графики в JavaScript
Программирование и разработка
Сегодня мы рассмотрим структуру данных графа, одну из наиболее широко используемых структур данных с приложениями в вычислениях, математике и других связанных областях. Мы покроем:
Что такое график?
Когда мы говорим о графиках, первое, что приходит на ум, — это обычные графики, используемые для моделирования данных. В информатике этот термин имеет совершенно другое значение.
В программировании граф — это общая структура данных, состоящая из конечного набора узлов (или вершин) и ребер. Ребра соединяют вершины, образуя сеть. Кромка может быть однонаправленной или двунаправленной. Ребра также известны как стрелки в ориентированном графе и могут содержать значения, которые показывают необходимую стоимость перехода от одной вершины к другой.
Вершина похожа на узлы связанного списка. Пара (х, у) называется ребром. Это сообщает, что вершина x соединяется с вершиной y.
Терминология графа
Давайте рассмотрим некоторые общие термины, с которыми вы столкнетесь при работе с графиками. Чтобы добиться успеха с графами, важно понимать ключевые термины, чтобы понять, как различные свойства взаимодействуют друг с другом относительно друг друга. Давайте взглянем.
Степень вершины: общее количество ребер, соединенных с вершиной. Есть два типа степеней:
- In-Degree: общее количество подключенных к вершине.
- Out-Degree: общее количество исходящих ребер, соединенных с вершиной.
Смежность: две вершины называются смежными, если есть ребро, соединяющее их напрямую.
Параллельные ребра : два неориентированных ребра параллельны, если у них одинаковые конечные вершины. Два направленных края параллельны, если они имеют одинаковое начало и назначение.
Самостоятельная петля: это происходит, когда ребро начинается и заканчивается в одной и той же вершине.
Изолированная вершина: вершина с нулевой степенью, что означает, что она не является конечной точкой ребра.
Типы графиков
Есть два общих типа графиков. В неориентированном графе ребра по умолчанию двунаправленные; например, для пары (0,1) это означает, что между вершинами 0 и 1 существует ребро без какого-либо определенного направления. Вы можете перейти от вершины 0 к 1 или наоборот.
Скажем, мы хотели вычислить максимально возможные ребра для неориентированного графа. Максимально возможные ребра графа с n вершинами будут всеми возможными парами вершин. ЕстьС (п, 2)С ( п, 2 )возможные пары вершин согласно комбинаторике. Решение с помощью биномиальных коэффициентов дает нам\ гидроразрыва 2п ( п — 1 ), так что есть \ гидроразрыва 2п ( п — 1 ) Максимально возможные ребра в неориентированном графе.
В ориентированном графе ребра однонаправлены; например, для пары (0,1) это означает, что существует ребро от вершины 0 к вершине 1, и единственный способ пройти — перейти от 0 к 1.
Это изменяет количество ребер, которые могут существовать в графе. Для ориентированного графа спп вершин, минимальное количество ребер, которые могут соединить вершину с любой другой вершиной, равно п-1п — 1. Итак, если у вас есть n вершин, то возможных ребер будетп * (п-1)п * ( п — 1 ).
Типы представлений графов
Мы можем представить граф по-разному, пытаясь решить проблемы в наших системах. В этом разделе мы рассмотрим два наиболее часто используемых представлений: смежности Список и матрица смежности.
Матрица смежности
Матрица смежности — это двумерная матрица, в которой каждая ячейка может содержать 0 или 1. Заголовки строк и столбцов представляют исходную и целевую вершины соответственно. Если ячейка содержит 1, это означает, что между соответствующими вершинами есть ребро. Граничные операции выполняются в постоянное время, так как нам нужно только манипулировать значением в конкретной ячейке.
Список смежности
В списке смежности массив связанных списков используется для хранения ребер между двумя вершинами. Размер массива равен количеству вершин. Каждый индекс в этом массиве представляет определенную вершину в графе. Если к графу добавляется новая вершина, она также просто добавляется в массив.
Добавление ребра и вершины в список смежности также является постоянной во времени операцией. Удаление края требуетO (E)O ( E )время, потому что — в худшем случае — все ребра могут быть в одной вершине. Следовательно, мы должны пройти все ребра E, чтобы добраться до последнего. Удаление вершины требуетО (В + Е)О ( В + Е ) время, потому что нам нужно удалить все его края, а затем переиндексировать оставшуюся часть списка на один шаг назад.
Сценарии использования: оба представления подходят для разных ситуаций. Если ваша модель часто манипулирует вершинами, лучше выбрать список смежности. Если вы имеете дело в основном с ребрами, матрица смежности — более эффективный подход.
Как реализовать график в JavaScript
Мы рассмотрели графики с теоретической точки зрения. Теперь попробуем реализовать граф в коде. В конце концов, лучший способ изучить структуры данных — это использовать их с реальными данными. Реализация ниже использует JavaScript и будет основана на представлении списка смежности.
Как мы знаем, Graphкласс состоит из двух членов данных:
График на JavaScript и canvas
В этой статье вы прочитает о том, как сделать график диаграмму на чистом JavaScript и canvas, но должен сказать, что код по сути был скопирован с сайта Web Reference .
JS рисование графиков:
Суть работы программы, что она будет создавать столбы диаграммы, их высота будет равна, единице размера умноженное на их значение, но сначала надо сделать HTML.
HTML:
В HTML нам надо только создать элемент и задать ему размер, айдишник.
На этом с HTML мы закончили.
CSS:
В CSS просто сделаем рамку, что бы разграничить страницу и график.
JavaScript:
Тут уже всё сложнее, но всё равно будет достаточно легко, сначала получим «canvas» элемент и сделаем так, что бы на нём рисовать 2D рисунки.
С помощью document.getElementById(‘canvas’) получаем элемент, а благодаря canvas.getContext(‘2d’) настраиваем на то, что бы рисовать 2D объекты.
Теперь надо нарисовать линии и метки, но тут уже не буду так подробно описывать, что к чему, так как, если это будет, статья будет не реально большая, поэтому если что то не понятно, то переходите по этой ссылки.
Здесь мы сделали линии, теперь надо добавить текст и цифры что бы понимать js графики и диаграммы.
Тут мы сделали по высоте метки допустимых значениях а по ширине в качестве меток пять месяцев, вот результат.
Как видите добавились линии и различные метки для понимания графика.
Последнее что осталось, это сами столбцы, для этого мы сначала создадим массив, где будут хранится значение каждого столбца, после будим проходится по этому массиву циклам и отрисовывать.