Как сохранить координаты бота css

Координатные оси

Освоив масштабирование с использованием D3, мы построили такую точечную диаграмму:

Результат работы кода

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

Знакомство с осями

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

Заметьте, что функции построения осей имеют свою специфику, так как они генерируют SVG-элементы. Также оси предназначены для использования с количественной шкалой(вместо порядковой).

Настройка осей

Используйте d3.svg.axis() для создания общего вида функцию оси:

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

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

Конечно, мы можем быть более краткими, и разместить код в одну строчку:

Наконец, собственно, для создания оси и вставки всех этих маленьких линий и меток внутрь нашего SVG, мы должны вызвать функцию xAxis методом call(). Я расположу этот код в конце нашего скрипта, так, чтобы ось была создана после создания всех остальных элементов в SVG:

Функция call() библиотеки D3 принимает выборку в качестве входных данных, а потом передает ее любой функции. Так, в нашем случае, мы просто добавили новый групповой элемент g, чтобы хранить все элементы, которые будут сгенерированы для построения оси(Элемент g не является необходимым, но собирает элементы в кучу и позволяет нам применять css-классы, которые мы вскоре напишем).

Этот элемент g становится выборкой для следующего метода в нашей цепочке вызовов функций. Метод call() берет эту выборку и передает ее функции xAxis, именно поэтому наша ось создается внутри нового элемента g. Фрагмент кода выше является хорошим, чистым и коротким, но мы сделаем для него эквивалентную запись:

Смотрите, вы могли бы втиснуть весь код функции оси внутри call(), но нам, как правило, проще сперва определить функцию, а лишь потом вызвать функцию. Так работают наши мозги. В любом случае, результат выглядит так:

Результат работы кода

Очистка

Вроде бы у нас получилась ось, но она не является ни красивой, ни полезной. Чтобы это исправить, давайте сначала назначим класс axis новому элементу g. Это мы можем сделать с помощью CSS:

Дальше, мы напишем наш первый CSS-стиль. Для этого поднимитесь выше, к тегу <head> на нашей странице:

Свойство shape-rendering — это SVG-атрибут, используются нами для того, чтобы ось и отметки на ней выглядели превосходно. Никаких эффектов размытия для осей мы не наблюдаем!

Результат работы кода

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

Обратите внимание, что использование (h — padding) устанавливает верхнюю границу нашей оси равной высоте всего изображения минут отступ(padding), который мы задали ранее.

Результат работы кода

Модифицируем отметки на нашей оси

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

Как вы можете себе представить, вы можете модифицировать все аспекты ваших осей. Начнем с грубого указания количества меток, используя метод ticks():

Результат работы кода

Вы, вероятно, заметили, что мы указали лишь пять меток, в то время как D3 нам нарисовал их целых семь. Это случилось потому, что D3 понял, что если использовать пять меток, то получатся невнятные интервалы 0, 150, 300, 450 и 600. D3 интерпретирует значение, переданное в метод ticks() как желаемое, но не обязательное, и переопределил ваше предложение по своему усмотрению, ориентируясь на удобочитаемость для человека, в нашем случае разделил шкалу на интервалы по 100. Именно поэтому эта функция является гениальной, поскольку увеличивает масштабируемость вашего графика. Если меняются значения набора данных и входная область значений сжимается или расширяется(большие числа или меньшие числа), D3 гарантирует, что метки делений по-прежнему удобны и понятны для чтения.

А как же ось Y?

Пришло время для создания вертикальной оси! Это мы сделаем путем копирования и настройки уже написанного кода для оси х:

и размещаем ее слева:

Обратите внимание, что метки оси y будут находится слева от нее, и именно поэтому мы добавляем отступ padding, который уже был создан.

Результат работы кода

Теперь график похож на настоящий! Но метки на yAxis обрезаются. Им надо предоставить больше пространства слева. Давайте увеличим нашу переменную отступа с 20 до 30:

Конечно, вы могли бы использовать отдельные переменные отступа для каждой оси координат для большей надежности, назвав их, например, xPadding и yPadding.

Здесь пример рабочего кода, и вот как выглядит результат:

Результат работы кода

Последние штрихи

Для того, чтобы доказать вам, что наши оси масштабируемы, я сделаю так, чтобы начальная выборка создавалась путем добавления в нее случайных значений:

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

Результат работы кода

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

И наконец, я думаю, мы можем избавиться от этих ужасных красных меток, закомментировав необходимые строки кода:

Результат работы кода

Форматирование наших отметок

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

В этом случае, вы могли бы сначала определить новый номер функции форматирования. Это, например, говорит, чтобы значение преобразовывалось в проценты с одним числом после запятой(для более близкого знакомства см. документацию d3.format()).

Сделаем, чтобы это форматирование было использовано для меток для оси х:

Подсказка: проще всего проверить результат работы кода в консоли JavaScript. Например, достаточно открыть любую страницу, которая загружает D3, например конечную версию нашей точечной диаграммы, и ввести в консоль на той странице ваши правила форматирования. Затем, проверьте функцию, передавая ей разные значения на вход:

Результат работы кода

Вы можете видеть, как числа 0.54321 преобразовано в 54.3%. Для целей наглядного отображения — превосходно!

canvas отрисовка сохраненных координат

Есть приложение по выделению областей полигонами, пользователь может сохранять координаты в localStorage и по нажатию кнопки отрисовывать их снова.

Проблема 1: после отрисовки сохраненных координат фигура появившиеся на холсте исчезнет(сотрется), при первом нажатии мыши, если пользователь продолжит рисовать рядом с отрисовавшейся фигурой полигон. Этого быть не должно. Это происходит из-за установки от чистки canvas при перерисовки координат.

Проблема 2: если я убираю от чистку проблема 1 решается, но фигуры перестают быть прозрачными в процессе рисования и закрашивают полностью участок холста.

Можно ли сохранить пропорции блока при изменении размера окна?

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

Единственный элемент в HTML, который сохраняет пропорцию при изменении одной из размерностей — это img-картинка.

1) Вариант с картинкой — использовать прозрачный пиксель 1х1, ложить его в нужный блок и за счет его свойства сохранения пропорций тянуть блок.

2) Еще одна фича — это вертикальный пэддинг в процетах, значение которого считается от ширины.

Например, padding-bottom: 50% задаст блоку padding равный полуширине родителя. Как бы странно это ни было, работает оно прекрасно:

Если нужны потомки внутри такого блока, то можно их повесить абсолютно на блок, так как координаты top/left/right/bottom отсчитываются от padding edge — границ padding. Таким образом можно сделать адаптивное видео, например.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *