Пришло время визуализировать данные.

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

var dataset = [ 5, 10, 15, 20, 25 ];

Мы будем использовать его для генерирования супер-простой столбиковой диаграммы. Столбиковые диаграммы по сути являются набором прямоугольников, а HTML тег <div> - это самый простой способ нарисовать прямоугольник(Опять же, для веб-браузера все является прямоугольниками, поэтому вы можете запросто адаптировать этот пример для использования span-ов или любых других элементов на ваше усмотрение).

Этот div может быть легко приспособлен для отображения столбика:

<div style="display: inline-block;
            width: 20px;
            height: 75px;
            background-color: teal;"></div>

(Следуя веб-стандартам, этот код является семантически неверным. Обычно мы не должны использовать пустой блок div для реализации визуальных эффектов, но при написании кода в этом руководстве мы отклоняемся от правил.)

Так как это div, его атрибуты width и height заданы в CSS-стилях. Каждый столбик в нашей диаграмме будет наследовать те же свойства(исключение только height), поэтому ниже приведен код для описания общих стилей и выделен в CSS-класс bar:

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override this later */
    background-color: teal;
}

Теперь к каждому div'у надо присвоить класс bar, чтобы наши общие стили применялись к нему:

<div class="bar"></div>

Добавить атрибут класса к элементу с использованием D3 можно с помощью метода selection.attr(). Очень важно понимать разницу между методами attr() и style().

Установка атрибутов

Метод attr() используется для установки элементу атрибута и его значения. HTML-атрибутом является любая пара свойство/значение, которые можно включать для элемента между скобками <>. Например, эти HTML-элементы:

<p class="caption">
<select id="country">
<img src="logo.png" width="100px" alt="Logo" />

в общем хранят 5 атрибутов(и соответствующих им значения), все из них могут быть установлены с использованием метода attr():

class   |   caption
id      |   country
src     |   logo.png
width   |   100px
alt     |   Logo

Для установки нашим div'ам класса bar мы можем использовать:

.attr("class", "bar")

Заметка по классам

Заметьте, что у элемента class является HTML-атрибутом. Класс, в свою очередь, используется для ссылки на правила в CSS-стилях. Это может вызывать некоторую путаницу, поскольку есть разница между установкой атрибута class и применении стиля напрямую к элементу через написание стилей в атрибуте элемента style. Вы можете использовать оба варианта. Конечно, вы должны использовать подход, который больше вам по душе, но я рекомендую использовать описание класса в CSS-свойствах, а затем применить этот класс к множественным элементам(путем установки атрибута class), или прописать все стили в атрибуте style элемента(когда определенное свойство должно быть уникальным).

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

.classed("bar", true)

Вернемся к столбикам

Сложив все это вместе с нашим набором данных, получим законченный D3 код:

var dataset = [ 5, 10, 15, 20, 25 ];

d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar");

Загляните на демо-страницу с этим кодом. Чтобы убедиться в этом, откройте исходники кода, и откройте веб-инспектор, чтобы увидеть, что происходит. Вы должны увидеть пять вертикальных столбиков, которые сгенерированы по одному для каждого значения в наборе данных. Без пробелов между ними, они смотрятся как один большой квадрат.

Устанавливаем стили

Метод style() используется для установки CSS-свойств и значений напрямую. HTML-элеметну. Это эквивалентно включению CSS-правил в атрибут style прямо в HTML-коде, как на примере:

<div style="height: 75px;"></div>

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

.style("height", function(d) {
    return d + "px";
});

Взгяните на результат на демо-странице. Вы должны увидеть маленькую стобиковую диаграмму!

Когда D3 проходит через каждое значение входного набора, значение d будет хранить соответствующее значение набора данных. Поэтому мы устанавливаем высоту в зависимости от значения d(текущее значение) и прибавляем px(то есть указываем единицу измерения). Высота div'ов будет таким: 5px, 10px, 15px, 20px и 25px.

Это может выглядеть немного просто, поэтому давайте сделаем наши столбики немного выше:

.style("height", function(d) {
    var barHeight = d * 5;  //Scale up by factor of 5
    return barHeight + "px";
});

и добавим небольшой просвет справа от каждого столбика:

margin-right: 2px;

Круто! Здесь представлена наша финальная демо-страница. Опять же, просмотрите исходники кода, а затем, используя веб-инспектор сравните с окончательной страницей.

Автором оригинального текста книги D3 Tutorials является Scott Murray
На русский язык перевел Ivanov Sergey. 2014 год