d3js Три круга

Пример работы с d3.js

d3 js

По мотивам статьи https://bost.ocks.org/mike/circles/

Пусть даны три круга 

Фрагмент из html-кода страницы:

Рассмотрим базовые методы работы с такими элементами.

Выборка элементов

Метод d3.selectAll по заданному селектору (например, "сircle") возвращает выборку из соответствующих элементов:

Посредством этой переменной мы можем изменять выбранные элементы. Например, изменить цвет заливки с помощью selection.style или радиус с помощью selection.attr:

Данный код изменит характеристики всех элементов выборки на одни и те же значения: 30 и "steelblue".

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

При каждом запуске данного кода круги будут оказываться в разных местах:

Привязка данных

Пусть есть числа 32, 57 и 112. Давайте представим эти данные с помощью наших кругов. Для этого применим метод selection.data, который привяжет числа к кругам:

Выборка элементов представляет собой массив, поэтому и числа мы поместили в массив как наиболее адекватную структуру для соответствия. Заметим, что в выборку элементы попадают в том порядке, в каком определены в DOM.

Установка соответствия происходит следующим образом: первое число (32) привязывается к первому кругу, второе число (57) - ко второму кругу и так далее. После этого в attr и style в анонимных функциях становится доступен первый аргумент (мы обычно называем его d), который ссылается на привязанные данные. Пример:

Результат:

Есть еще необязательный второй аргумент: индекс элемента в выборке (рекомендуем называть его i). Он часто используется при явной зависимости характеристик элемента от его номера. Пример:

Обратите внимание, что в SVG начало координат находится в левом верхнем углу.

Ввод элементов

А что если у нас не три числа, а четыре? Тогда кругов недостаточно и мы должны создать еще один. Это можно сделать вручную, но удобнее использовать метод enter.

все статьи по d3.js

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

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