{"id":21377200,"url":"https://github.com/greetclock/skeleton","last_synced_at":"2026-03-10T23:36:36.699Z","repository":{"id":236663726,"uuid":"26599097","full_name":"greetclock/skeleton","owner":"greetclock","description":"Рисование математических 2D визуализаций","archived":false,"fork":false,"pushed_at":"2016-07-05T15:00:00.000Z","size":4582,"stargazers_count":0,"open_issues_count":21,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-20T14:59:44.177Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greetclock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-11-13T17:24:46.000Z","updated_at":"2023-06-18T19:59:51.000Z","dependencies_parsed_at":"2024-04-28T05:56:20.757Z","dependency_job_id":"9a1b1aa1-49a8-4b75-9307-aac2e1230bfa","html_url":"https://github.com/greetclock/skeleton","commit_stats":null,"previous_names":["greetclock/skeleton"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/greetclock/skeleton","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greetclock%2Fskeleton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greetclock%2Fskeleton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greetclock%2Fskeleton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greetclock%2Fskeleton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greetclock","download_url":"https://codeload.github.com/greetclock/skeleton/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greetclock%2Fskeleton/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30362123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"ssl_error","status_checked_at":"2026-03-10T21:40:59.357Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T09:19:35.124Z","updated_at":"2026-03-10T23:36:36.666Z","avatar_url":"https://github.com/greetclock.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Сейчас скелетон еще разрабатывается, поэтому я не могу обещать, что интерфейс сохранится в следующих коммитах.\nЭта документация **актуальна для версии 0.0.5**. Проверить версию можно так: `Plotter.version`\n\n`Plotter` -- основной объект. Он отвечает за прорисовку графика и всех объектов, которые на нем находятся.\nДля создания графика нужно передать в качестве первого аргумента в конструктор `Plotter` id DOM-элемента, где дальше будет отрисовываться график. \n```javascript\nvar plotter = new Plotter(\"plot\", options);\n```\n\nВторой *необязательный* аргумент конструктора `Plotter` `options` -- это объект, в котором можно менять некоторые свойства `Plotter`. Вот они, а также их значения по-умолчанию:\n  * **left: -10**, левая граница графика\n  * **right: 10**, правая граница графика\n  * **bottom: -5**, нижняя граница графика\n  * **top: 5**, верхняя граница графика\n  * **width: 800**, ширина графика в пикселях\n  * **height: 600**, высота графика в пикселях\n  * **stroke: \"#000000\"**, цвет рамки графика\n\nЕсть еще несколько других свойств, которые я намеренно не перечисляю. Какие-то из них лучше не трогать, а изменение других может привести к падению программы.\n\n\nФункции-рисовалки -- главное, что есть у `Plotter`, и основная фишка библиотеки. С помощью них можно много рисовать, но писать мало кода. Пример вызова функции, которая нарисует график sin(x):\n```javascript\nvar func = plotter.addFunc(function (x) {\n    return Math.sin(x);\n}, options);\n```\n\nСуществуют методы для добавления закрашенной области, линии, точки и функции. Каждый метод возвращает объект. у которого есть методя для его модификации. Например, `Plotter.addFunc` вернет объект функции, у которого можно будет поменять цвет, границы прорисовки, точность, толщину, точки разрыва и даже саму функцию. \n\n### Методы Plotter\nО конструкторе Plotter я уже рассказал.Теперь я расскажу о том, что делать с объектом, которые возвращает конструктор. У него есть несколько методов:\n\n\n##### Plotter.addFunc(Function, Object)\nПервый аргумент - это функция, которую нужно нарисовать. Второй *необязательный* аргумент - это объект, в котором можно менять некоторые свойства.\n*  **accuracy: Plotter.width**, точность прорисовки графика. По-умолчанию равна ширине графика в пикселях. Количество точек, по которым строится график.\n*  **strokeWidth: 2**, толщина линии графика\n*  **color: 0**, цвет. Нулевой цвет -- это синий.  Если менять это свойство вручную, без вызова метода setColor, то нужно указывать цвет в формате rgb. Первый символ должен быть решеткой, а дальше следуют 6 шестнадцатиричныных цирф: `\"#FF0000\"` - красный. Лучше не менять это свойство напрямую, а использовать сеттер, так как в нем можно выбрать цвет из заранее заданного набора.\n*  **breaks: []**, массив точек разрыва. Когда строится график функции, у которой есть разрывы, то здесь их нужно указать. Например, у графика сигнума точкой разрыва будет 0. Такая же точка разрыва будет у гиперболы и у графика sin(x)/x.\n*  **left: null**, левая граница прорисовки. Левее нее график никогда не будет рисоваться. `null` означает, что границы нет.\n*  **right: null**, правая граница прорисовки. Правее нее график никогда не будет рисоваться. `null` означает, что границы нет.\n\n##### Методы Func\nВот построена функци и получен объект типа `Func`:\n```javascript\nvar func = plotter.addFunc(function (x) {\n    return x;\n});\n```\nМожно, например, поменять цвет:\n```javascript\nfunc.setColor(7);   //поменяет цвет на красный.\n```\nМожно получить цвет:\n```javascript\nfunc.getColor();    //\"#d62728\" -- тот, который был установлен. Цвет всегда возвращается в формате rgb.\n```\nМожно делать и то, и другое с помощью одного метода:\n```javacript\nfunc.Color(9);  //вызов .Color() с аргументом поменяет цвет. Сейчас был установлен фиолетовый.\nfunc.Color();   //вызов .Color() без аргументов просто вернет текущий цвет. Будет возвращен rgb-код фиолетового: \"#9467bd\".\n```\n\nЯ показал примеры использования методов Func. Какие вообще методы у него есть? \n* **Func.getAccuracy()**, вернет текущую точность прорисовки\n* **Func.setAccuracy(Number)**, установит указанную точность прорисовки. Число должно быть целым.\n* **Func.Accuracy(Number)**, если передать *необязательный* аргумент, то установит точность прорисовки. Если не указывать, то вернет текущую точность прорисовки.\n\n---\n\n* **Func.getStrokeWidth()**, вернет текущую толщину линии графика.\n* **Func.setStrokeWidth(Number)**, установит указанную толщину.\n* **Func.StrokeWidth(Number)**, если передать *необязательный* аргумент, то установит толщину. Если не указывать, то вернет текущую толщину.\n\n---\n\n* **Func.getColor()**, вернет текущий цвет в формате rgb.\n* **Func.setColor(Number or String)**, установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20\n* **Func.Color(Number or String)**, аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в `.setColor(Number or String)`. Если его нет, то будет возвращен текущий цвет в формате rgb.\n\n---\n\n* **Func.getColour()**, алиас для `.getColor()`\n* **Func.setColour(Number or String)**, алиас для `.setColor(Number or String)`\n* **Func.Colour(Number or String)**, алиас для `.Color(Number or String)`\n\n---\n\n* **Func.getBreaks()**, вернет массив точек разрыва. Модификации в этом массиве приведут к изменениям в массиве внутри объекта. Иначе говоря, копия не создается. При необходимости копию можно создать с помощью `var newArr = _.clone(arr);`. В сборку скелетона уже включен lodash 2.4.1, набор утилит для js. Подробнее: https://lodash.com/\n* **Func.setBreaks(Array)**, установит указанный массив точек разрыва. Копия при этом создаваться не будет. \n* **Func.Breaks(Array)**, если *необязательный* аргумент указан, то установит новый массив точек разрыва. Если нет, то вернет текущий массив.\n\n---\n\n* **Func.getLeft()**, вернет левую границу прорисовки.\n* **Func.setLeft(Number)**, установит левую границу прорисовки.\n* **Func.Left(Number)**, если *необязательный* аргумент указан, то установит левую границу прорисовки. Иначе вернет текущую.\n\n---\n\n* **Func.getRight()**, вернет правую границу прорисовки.\n* **Func.setRight(Number)**, установит правую границу прорисовки.\n* **Func.Right(Number)**, если *необязательный* аргумент указан, то установит правую границу прорисовки. Иначе вернет текущую.\n\n---\n\n* **Func.getFunc()**, вернет текущую функцию.\n* **Func.setFunc(Function)**, установит функцию.\n* **Func.Func(Function)**, если аргумент указан, то установит функцию. Если нет, то вернет текущую функцию.\n\n---\n\n##### Plotter.addLine(x1, y1, x2, y2, Object)\nПервые четыре аргумента задают координаты двух точек, по которым будет строиться отрезок. Последний *необязательный* аргумент - это объект, в котором можно передавать опции. Слева указано имя свойства, а справа - его значение по-умолчанию.\n\n* **strokeWidth: 2**, толщина линии\n* **color: 0**\n\n##### Методы Line\n* **Line.setX1(x1)**\n* **Line.getX1()**\n* **Line.X1(x1)**, принимает *необязательный* аргумент. Если он задан, то устанавливает x1. Иначе возвращает текущее значение x1.\n\n---\n\n* **Line.setX2(x2)**\n* **Line.getX2()**\n* **Line.X2(x2)**, принимает *необязательный* аргумент. Если он задан, то устанавливает x2. Иначе возвращает текущее значение x2.\n\n---\n\n* **Line.setY1(y1)**\n* **Line.getY1()**\n* **Line.Y1(y1)**, принимает *необязательный* аргумент. Если он задан, то устанавливает y1. Иначе возвращает текущее значение y1.\n \n---\n\n* **Line.setY2(y2)**\n* **Line.getY2()**\n* **Line.Y2(y2)**, принимает *необязательный* аргумент. Если он задан, то устанавливает y2. Иначе возвращает текущее значение y2.\n\n---\n\n* **Line.getColor()**, вернет текущий цвет в формате rgb.\n* **Line.setColor(Number or String)**, установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20\n* **Line.Color(Number or String)**, аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в `.setColor(Number or String)`. Если его нет, то будет возвращен текущий цвет в формате rgb.\n\n---\n\n* **Line.getColour()**, алиас для `.getColor()`\n* **Line.setColour(Number or String)**, алиас для `.setColor(Number or String)`\n* **Line.Colour(Number or String)**, алиас для `.Color(Number or String)`\n\n---\n\n##### Plotter.addArea(Array, Object)\nСтроит произвльную закрашенную область на графике. Для построения нужно передать в качестве первого аргумента массив точек. Каждая точка - это объект, у которого есть два поля: x и y.\n```javascript\n    var arr = [];\n    arr.push({\n        x: 0,\n        y: 0\n    });\n    arr.push({\n        x: 1,\n        y: 0\n    });\n    arr.push({\n        x: 0.5,\n        y: 1\n    });\n    var area = Plotter.addArea(arr);\n```\n\nВторой *необязательный* аргумент `.addLine` - объект с опциями. Можно менять следующие свойства:\n  * **color: 20**, цвет границы области. По-умолчанию черный.\n  * **fillOpacity: 0.2**, прозрачность закраски области. Может меняться от 0 до 1, где 1 - непрозрачная, а 0 - полностью прозрачная, невидимая.\n  * **strokeWidth: 0**, толщина границы области. По-молчанию толщина нулевая, то есть граница невидимая\n  * **fill: 1**, цвет закраски области.\n  \n##### Методы Area\n* **Area.getColor()**, вернет текущий цвет в формате rgb.\n* **Area.setColor(Number or String)**, установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20\n* **Area.Color(Number or String)**, аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в `.setColor(Number or String)`. Если его нет, то будет возвращен текущий цвет в формате rgb.\n\n---\n\n* **Area.getColour()**, алиас для `.getColor()`\n* **Area.setColour(Number or String)**, алиас для `.setColor(Number or String)`\n* **Area.Colour(Number or String)**, алиас для `.Color(Number or String)`\n \n---\n\n* **Area.setFill(Number or String)**, устанавливает цвет заливки области. Работает также, как и `.setColor`\n* **Area.getFill()**, возвращает цвет заливки области\n* **Area.Fill(String or Number)**, принимает *необязательный* аргумент. Если он есть, то устанавливает указанный цвет, иначе возвращает текущий цвет.\n\n---\n\n* **Area.setFillOpacity(Number)**, принимает число от 0 до 1 и устанавливает указанную прозрачность заливки.\n* **Area.getFillOpacity()**, возвращает текущую прозрачность заливки.\n* **Area.FillOpacity(Number)**, принимает *необязательный* аргумент. Если он есть, то устанваливает указанную прозрачность, иначе возвращает текущую.\n \n---\n\n* **Area.getStrokeWidth()**, вернет текущую толщину границы области.\n* **Area.setStrokeWidth(Number)**, установит указанную толщину.\n* **Area.StrokeWidth(Number)**, если передать *необязательный* аргумент, то установит толщину. Если не указывать, то вернет текущую толщину.\n\n---\n\n##### Plotter.addPoint(x, y, Object)\nРисует точку по указанным координатам. Третьеим *необязательным* аргументом можно передать некоторые свойства:\n*  **movable: false**, можно ли точку перетаскивать мышкой. По-умолчанию нельзя.\n*  **color: 6**\n*  **size: 3**, размер точки\n\n##### Методы Point\n* **Point.setSize(size)**, меняет размер точки. Можно передать либо неотрицательное число, либо одну из четырех строк: \"large\", \"medium\", \"small\", \"tiny\".\n* **Point.getSize()**, возвращает текущий размер\n* **Point.Size(size)**, принимает *необязательный* аргумент. Если он есть, то устанавливает размер, иначе возвращает текущий размер.\n\n---\n\n* **Point.getX()**\n* **Point.setX(x)**\n* **Point.X(x)**, аргумент необязательный.\n\n---\n\n* **Point.getY()**\n* **Point.setY(y)**\n* **Point.Y(y)**, аргумент необязательный.\n\n---\n\n* **Point.getColor()**, вернет текущий цвет в формате rgb.\n* **Point.setColor(Number or String)**, установит указанный цвет. Если передавать строку, то она должна быть в формате rgb, то есть первый символ - решетка, а дальше 6 шестандцатиричных цифр. Если передавать число, то оно может быть от 0 до 20 включительно. 20 соответствует черному цвету. Остальные номера соответсвуют этим цветам: https://github.com/mbostock/d3/wiki/Ordinal-Scales#category20\n* **Point.Color(Number or String)**, аргумент необязателен. Если он есть, тобудет установлен указанный цвет, как в `.setColor(Number or String)`. Если его нет, то будет возвращен текущий цвет в формате rgb.\n\n---\n\n* **Point.getColour()**, алиас для `.getColor()`\n* **Point.setColour(Number or String)**, алиас для `.setColor(Number or String)`\n* **Point.Colour(Number or String)**, алиас для `.Color(Number or String)`\n \n---\n\n##### Остальные методы Plotter\nПомимо рисования объектов, Plotter еще отвечает за учет всех созданных объектов. Если нужно удалить какой-нибудь, то нужно вызвать метод `.remove`:\n\n```javascript\n    var point = plotter.addPoint(1, 1);\n    plotter.remove(point);\n```\n\nВ некоторых случаях может помочь вызов методов `Plotter.draw()` или, что то же самое, `Plotter.redraw()`. В текущей версии их использовать не нужно.\nТакже можно узнать id элемента, к которому привязан график: `Plotter.getID()`\n\n# PlotContainer, несколько графиков на одной странице\nКак и Plotter, PlotContainer является глобальным объектом. Он служит для того, чтобы DOM-элемент с указанным ID работал в качестве контейнера для других DOM-элементов, которые, в свою очередь могут содержать либо графики, либо произвольный\nhtml-код.\n\nПроще говорить, что PlotContainer - это контейнер, который хранит в себе несколько Plotter'ов.\n\n\n`Plotter PlotContainer.addPlot(options)` добавляет в DOM-контейнер график и возвращает его. Возвращает то же самое, что и конструктор Plotter. Опции те же самые, что и у Plotter.\n\n\n`DOM_ID PlotContainer.addEmptyDiv()` создает в контейнере пустой \u003cdiv\u003e и возвращает его ID. Можно использовать, например, для дальнейшей работы с Controls.\n\nИнициализация контейнера и создание графика в нем:\n\n```javascript\n    var container = new PlotContainer(\"plot\");\n\n    var plotter = container.addPlot();\n```\n\nВторой график можно создать также, как и первый:\n\n```javascript\n    var plotter2 = container.addPlot();\n```\n\nКроме того, в метод можно передавать опции, как это делает с конструктором Plotter:\n```javascript\n var plotter3 = container.addPlot({\n   width: 400,\n   height: 400\n  });\n ```\n\n#Примеры\nИх можно посмотреть в папке scripts. В index.html можно менять имя подключаемого файла, чтобы смотреть разные примеры.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreetclock%2Fskeleton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreetclock%2Fskeleton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreetclock%2Fskeleton/lists"}