Выбор элементов с помощью D3 Selection

Как использовать D3 Selection для выбора HTML и SVG элементов. В этой статье показано, как выбирать элементы, изменять элементы, обрабатывать события, управлять потоком. . . (соединение данных рассматривается отдельно). Кроме того, есть цепочка вызовов функций фильтрации и сортировки для обработки элементов. D3 Selection может выбирать некоторые HTML или SVG элементы и изменять их стиль и/или атрибуты. Например, установить стиль элемента p с помощью .attr, добавить класс, .style изменить стиль:

d3.selectAll("p")
 .attr("class", "p1")
 .style("color", "red");

 Например, если файл index.html содержит несколько элементов circle:

<svg width="600" height="100">
<g transform="translate(60, 60)">
 <circle cx="50" />
 . . .
</g>
</svg>

Можно использовать d3.selectAll для выбора circle, а затем .style изменить их fill, .attr изменить их r:

d3.selectAll('circle')
.style('fill', 'red')
.attr('r', function() {
 return 20;
});


Попробуйте редактировать пример выше в Codepen

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

D3 имеет два метода для выбора элементов: d3.select и d3.selectAll. d3.select выбирает первый совпадающий элемент, d3.selectAll выбирает все совпадающие элементы. Оба метода принимают строку в качестве единственного параметра.Эта строка указывает элементы для выбора и имеет форму строки-селектора CSS (например, div.item, #my-chart или g:first-child). (Если вы не знакомы с селекторами CSS, посмотрите часть W3C-CSS.)

const a = d3.select("a"); // выбирает первый элемент
const a = d3.selectAll("a"); // выбирает все элементы
const b = d3.selectAll("p").selectAll("b"); // выбирает все элементы b внутри элементов p
const items = d3.selectAll(".item");  // выбирает все элементы с классом .item

Изменение элементов

После выбора элементов вы можете использовать следующие функции для их изменения:

имя	поведение	пример
.attr	Обновление атрибута	d3.select('rect').attr('width', 10)
.classed	Добавление/удаление класса	d3.select('.item').classed('selected', true)
.style	Обновление стиля	d3.selectAll('circle').style('fill', 'red')
.property	Обновление свойства элемента	d3.selectAll('.checkbox').property('checked', false)
.text	Обновление текста	d3.select('div.title').text('Моя новая книга')
.html	Изменение содержимого HTML	d3.select('.legend').html('<div class="block"></div><div>0 - 10</div>')
Независимо от того, используете ли вы .select или .selectAll, все элементы в выборке будут изменены.
Вот пример использования всех этих функций:

Попробуйте редактировать этот пример в CodePenio/wantnocode/pen/WNzaLxb)

Модификация элементов с помощью функций

Кроме передачи константных значений в фиксированные функции .style, .attr, .classed, .property, .text, .html, вы также можете передать функцию. Например:

d3.selectAll('circle')
    .attr('r', function(d, i) {
      return i * 10;
    });

Эта функция принимает два параметра, обычно называемых data и index (сокращенно d и i). Первый параметр d — это соединенные данные, i — это индекс элемента в выборке. Если вы хотите обновить элементы в зависимости от их положения в выборке, вы можете использовать параметр i. Например, чтобы изменить координату x элемента circle:

d3.selectAll('circle')
    .attr('cx', function(d, i) {
      return i * 10;
    });

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

function changePosition(d, i) {
  return i * 10;
}
d3.selectAll('circle')
  .attr('cx', changePosition);

Попробуйте редактировать этот пример в CodePen

Вставка и удаление элементов

С помощью методов .append и .insert можно добавлять элементы в выборку. .append добавляет элемент к каждому элементу в выборке. Если элемент уже имеет дочерние элементы, новый элемент станет последним дочерним элементом. Первый параметр указывает тип элемента. Элементы можно удалить с помощью метода .remove. Например: ниже приведены 3 элемента g, каждый из которых содержит элемент circle:

<g transform="translate(0, 0)">
 <circle r="40" />
</g>
<g transform="translate(120, 0)">
 <circle r="40" />
</g>
<g transform="translate(240, 0)">
 <circle r="40" />
</g>

Вы можете использовать метод append, чтобы добавить элемент text к каждому элементу g:

d3.selectAll('g')
 .append('text')
 .text('A');

Это приведет к добавлению элемента text к каждому элементу g:

<g transform="translate(0, 0)">
 <circle r="40" />
 <text>A</text>
</g>
.  .  .

! [image-20220815171113940](. /image/image-20220815171113940. png)

[Попробуйте редактировать этот пример на Codepen](https://codepen. io/wantnocode/pen/eYMPbME) Метод .insert также добавляет элементы, позволяя указать второй параметр, который определяет, перед каким элементом будет вставлен новый элемент. В приведенном выше примере замените .append на .insert, а второй параметр установите как 'circle':

d3.selectAll('g.item')
 .insert('text', 'circle')
 .text('A');

! [image-20220815171917840](. /image/image-20220815171917840. png)

[Попробуйте редактировать этот пример на Codepen](https://codepen. io/wantnocode/pen/ExEdGRE) Метод .remove удаляет все выбранные элементы с страницы. Например: удалите все круги на графике

d3.selectAll('circle')
 .remove();

! [image-20220815172305125](. /image/image-20220815172305125. png) ! [image-20220815172312667](. /image/image-20220815172312667. png)

[Попробуйте редактировать этот пример на Codepen](https://codepen. io/wantnocode/pen/MWVPZPv)

Обработка событий

Вы можете использовать метод .on, чтобы добавить обработчики событий к выбранным элементам. Этот метод имеет два параметра:

• Первый параметр — это строка typenames, которая указывает тип события.
• Второй параметр — это функция («callback»), которая будет вызвана при срабатывании события. Эта функция-обработчик имеет два параметра, обычно называемых e и d. e — это объект события DOM, а d — это связанная с элементом данные. listener В версиях D3 5+ функция-обработчик получает данные d и индекс i. Самые распространенные события включают (для получения дополнительной информации см. Справочник событий MDN): | Название события | Описание | | :------------- | :------------- | | click | Элемент был нажат | | mouseenter | Мышь переместилась на элемент | | mouseleave | Мышь покинула элемент | В коллбэках событий, переменная this привязывается к DOM-элементу, который вызвал событие. Это позволяет нам выполнять следующие действия:

d3.select('circle')
  .on('click', function(e, d) {
    d3.select(this)
      .style('fill', 'orange');
  });

Обратите внимание, что this — это DOM-элемент, а не выбор D3, поэтому, если вы хотите использовать D3 для его модификации, вам нужно сначала использовать d3.select(this).

Попробуйте редактировать пример выше на Codepen

Chaining (Цепочка)

Большинство методов выбора (Selection methods) возвращают сам выбор. Это означает, что методы выбора, такие как .style и .attr, могут быть цепочками.Например:

d3.selectAll('circle')
 .style('fill', '#000')
 .attr('r', 20)
 .on('click', function(e, d) {
   d3.select(this)
     .style('fill', 'orange');
 });

! [image-20220815174708732](. /image/image-20220815174708732. png)

Контроль потока

. each

Метод . each позволяет вызывать функцию для каждого элемента выбора. Коллбэк-функция имеет два параметра, обычно называемых d и i. Первый параметр d — это связанная с элементом данные (или "данные"), i — это индекс элемента в выборе. this — это текущий элемент HTML или SVG в выборе. Это пример использования . each для вызова функции для каждого элемента выбора. Функция проверяет, является ли индекс четным или нечетным, и соответствующим образом изменяет круг:

d3.selectAll('circle')
 .each(function(d, i) {
   var odd = i % 2 === 1; // Проверка на четность
   d3.select(this)
     .style('fill', odd ? 'red' : '#000')
     .attr('r', odd ? 40 : 20);
 });

! [image-20220815175047627](. /image/image-20220815175047627. png)

Попробуйте редактировать пример выше на Codepen

. call

Метод . call позволяет вызывать функцию, передавая сам выбор в качестве первого параметра. Например, функция colorAll принимает выбор и устанавливает цвет заливки элементов выбора в красный:

function colorAll(selection) {
   selection
       .style('fill', 'red');
}
d3.selectAll('circle')
   .call(colorAll);

! [image-20220815175331928](. /image/image-20220815175331928. png)

Попробуйте редактировать пример выше в CodePen

Также есть empty(), который возвращает true, если выборка не содержит элементов, nodes(), node() и т. д. См. D3-control-flow

Фильтрация и сортировка выборок

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

В этом примере вы фильтруете четные элементы и окрашиваете их в оранжевый цвет:

d3.selectAll('circle')
  .filter(function(d, i) {
    return i % 2 === 0;
  })
  .style('fill', 'orange');

Попробуйте редактировать пример выше в CodePen

Вы можете сортировать элементы выборки, вызвав .sort и передав функцию-компаратор. Функция-компаратор имеет два параметра, обычно a и b, которые представляют данные двух сравниваемых элементов. Если функция-компаратор возвращает отрицательное число, a будет стоять перед b, если положительное — a будет стоять после b.

Таким образом, если вы добавите следующие данные в выборку:

[
 {
  "name": "A",
  "score": 35
 },
 {
  "name": "B",
  "score": 40
 },
 {
  "name": "C",
  "score": 30
 }
];

Вы можете отсортировать их по полю score следующим образом:

d3.selectAll('.person')
  .sort(function(a, b) {
    return b.score - a.score;
  });

/image/image-20220816100644393. png)

! [](. /image/image-20220816100653868. png)

Попробуйте редактировать пример выше в CodePen