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

Последнее обновление: 1.11.2015

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

Чтобы выбрать определенный элемент из структуры DOM, необходимо использовать селектор. Селектор представляет собой некий шаблон, которому должны соответствовать элементы. В качестве селекторов здесь также, как и в jQuery, применяются css-селекторы.

Для выборки D3.js предоставляет два метода:

  • d3.select("selector"): возвращает первый элемент из всех элементов, которые соответствуют селектору

  • d3.selectAll("selector"): возвращает все элементы, которые соответствуют селектору

В прошлой теме мы использовали вызов d3.select("body"), который выбирал элемент body. Рассмотрим еще несколько примеров. Например, у нас есть набор элементов:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"> </script>
<body>
<div class="red">red 1</div>
<div class="blue">blue 1</div>
<div class="red">red 2</div>
<div class="blue">blue 2</div>
<script>
var selection = d3.selectAll("div.red");
console.log(selection);
</script>
</div>
</body>
</html>

Так как мы можем использовать стандартные селекторы css, то с помощью вызова d3.selectAll("div.red") мы можем получить все элементы div с классом red:

Выборка в D3.js

Вызов d3.select("div.red") выберет только первый div c классом red.

При этом мы можем использовать последовательно несколько уровней выборки:

d3.select('body').select('div.blue');

В данном случае сначала выбирается элемент body, потом из его элементов выбирается элемент div с классом blue.

Операторы

Операторы представляют методы, которые проводят различные операции над выборкой. Существует несколько основных операторов:

  • attr(): получает или устанавливает значение атрибута

  • style(): получает или устанавливает стиль элемента

  • text(): получает или устанавливает текстовое содержимое

  • html(): получает или устанавливает html-код элемента

Оператор text()

Получение текста:

var innerText = d3.select("div.red").text();
console.log(innerText);

Установка текста:

d3.select("div.red").text("Первый элемент div.red");

Оператор attr()

Получение значение атрибута (на примере атрибута class):

var attrValue = d3.select("div").attr("class");
console.log(attrValue);

Установка значения атрибута:

d3.select("div").attr("class", "blue")

Оператор style()

Установка стиля:

d3.select("div.red").style("width", "50px").style("height", "100px")
	.style("border", "solid 1px black").style("color", "red");

С помощью цепочки вызовов устанавливаем стили для ширины, высоты, границы и цвета текста

Получение стиля:

var width = d3.select("div.red").style("width");
console.log(width);

Оператор html()

Установка кода html:

d3.select("div.red").html("<h1>Заголовок</h1><p>Абзац</p>");

Получение html:

var htmlCode = d3.select("div.red").html();
console.log(htmlCode);

Управление html-кодом элементов

Для создания новых элементов D3.js применяет ряд операторов, среди которых самыми распространенными являются следующие:

  • append(): добавляет новый элемент, тег которого передается в метод в качестве параметра

  • insert(): добавляет новый элемент по определенной позиции

  • remove(): удаляет элемент

Добавление элемента

Добавим в элемент div какой-нибудь новый элемент:

d3.select("div.red").append('h2').text('Заголовок');

Метод append принимает название тега. Все операторы, которые идут по цепочке после метода append, применяются уже к создаваемому элементу. так, в данном случае вызов метода text() будет относиться к создаваемому элементу h2, а не к выбранному ранее элементу div.

Метод insert() принимает два параметра:

d3.select("body").insert('h2', 'div.blue').text('Заголовок');

Создаваемый элемент - в данном случае заголовок h2 добавляется перед первым найденным в body элементом div с классом blue.

Метод remove() удаляет элемент:

d3.select('div.blue').remove();

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850