Как работает метод attr() в D3.js?

@hattie 

Метод attr() в D3.js используется для установки атрибутов элементов визуализации на основе данных.

Синтаксис метода attr() выглядит следующим образом:

1

selection.attr(name[, value]);

Здесь selection является выборкой элементов, для которых необходимо установить атрибуты, name - это имя атрибута, а value - это значение атрибута.

Метод attr() может использоваться для установки любых атрибутов элементов, таких как class, id, width, height и т.д. Он также может использоваться для установки пользовательских атрибутов.

Например, для установки атрибута class элементов на основе данных можно использовать следующий код:

1
2
3
4
5
6

d3.select("body")
  .selectAll("div")
  .data([1, 2, 3, 4, 5])
  .enter()
  .append("div")
  .attr("class", function(d) { return "box box-" + d; });

В этом примере мы создаем пять элементов div, каждый из которых получает класс box и дополнительный класс box-1, box-2, и т.д. в зависимости от своих данных.

Метод attr() также может использоваться для изменения атрибутов уже существующих элементов на основе данных. Например, для изменения атрибута fill элементов на основе их данных можно использовать следующий код:

1
2

d3.selectAll("circle")
  .attr("fill", function(d) { return d > 50 ? "red" : "blue"; });

В этом примере мы изменяем атрибут fill элементов circle на красный или синий цвет в зависимости от их данных.