После того, как вы загрузили ваши данные и связали их с только что созданными DOM-элементами, как вы могли бы их использовать? Ниже приведен наш прошлый код:
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
Давайте заменим последнюю строку на:
.text(function(d) { return d; });
Проверьте, что делает новый код на демо-странице.
Ух ты! Мы использовали наши данные для заполнения содержимого каждого параграфа, а все благодаря магическому методу data(). Вы видите, когда мы объединяем методы в цепочки, везде, после того, как вы вызвали метод data(), вы можете вызвать анонимную функцию, которая принимает параметр d на вход. Волшебный метод data() гарантирует, что d хранит то значение, которое было привязано к конкретно этому элементу.
Значение "текущего элемента" со временем меняется, так как D3 перебирает каждый элемент. Например, когда перебирая в третий раз, наш код создает третий элемент p, то d будет соответствовать третьему значению нашего входного набора данных(dataset[2]). Поэтому третий параграф хранит внутри себя надпись "15".
В случае, если вы не знаете, как пишутся новые функции(так же называются методами), базовая структура функции определяется как:
function(input_value) {
//Calculate something here
return output_value;
}
Функция, что мы использовали выше невероятно проста, ничего сверхъестественного:
function(d) {
return d;
}
она обернута в функцию text() объекта D3, поэтому, что бы наша функция на возвращала, оно обрабатывается внутри функции text().
.text(function(d) {
return d;
});
Но мы можем быть(и будем) более изобретательны, потому что функцию можно изменить так, как мы захотим. Конечно, это удовольствие и головная боль написания собственного кода на JavaScript. Может быть, вы хотите добавить больше текста, например:
.text(function(d) {
return "I can count up to " + d;
});
Вы, возможно удивлены, почему вы должны писать function (d), вместо того, чтобы просто не использовать d сам по себе. Например, это не будет работать:
.text("I can count up to " + d);
В этом случае, без обертки d в анонимную функцию, d будет неопределенным. Думаю, что d это просто маленькое шаблонное значение, которому просто необходимо тепло, хранящееся в объятиях скобок доброй, заботливой функции.
Здесь d осторожно и подходящим образом обернута в функцию:
.text(function(d) { // <-- Note tender embrace at left
return "I can count up to " + d;
});
Причиной такого синтаксиса является то, что методы text(), attr() и многие другие методы могут принимать в качестве аргумента функции. Например, text() также может принимать простую строку текста в качестве аргумента:
.text("someString")
...или результат выполнения функции:
.text(someFunction())
...или анонимную функцию, которая сама по себе является аргументом, в случае, когда вы пишите приблизительно так:
.text(function(d) {
return d;
})
Выше вы определили анонимную функцию. Если D3 видит, что имеется анонимная функция в аргументе, он вызывает метод call() этой функции, передавая как аргумент d. Без анонимной функции D3 не знает, кому передавать d в качестве аргумента.
Во-первых, это может казаться нелепым, мол надо делать много лишней работы, чтобы просто получить d, но ценность этого подхода будет ясна, когда мы будем разбирать более сложные примеры.
Вещи становятся более интересными, когда мы открываем новые методы D3, такие как attr() и style(), которые позволяют устанавливать нам HMTL-атрибуты и CSS-свойства выборки, соответственно.
Например, добавление одной строчки в наш код делает это:
.style("color", "red");
Теперь весь текст красного цвета, большое дело. Также мы можем использовать другую функцию, которая делает цвет красным, если текущее значение превышает определенный порог. Поэтому мы в последней строке вставим такую функцию:
.style("color", function(d) {
if (d > 15) { //Threshold of 15
return "red";
} else {
return "black";
}
});
Посмотрите этот код в действии. Заметьте, что первые три значения черного цвета, но как только d превышает допустимый порог в 15 - текст становится красным.
В следующей главе мы будем использовать attr() и style() для манипулирования блоками, чтобы создать простую столбиковую диаграмму - наш первый визуальный образ!