Учебники

D3.js — API выбора

Март 22, 2018

Выборы — это мощное преобразование данных модели объекта документа (DOM), управляемое данными. Он используется для установки атрибутов, стилей, свойств, HTML или текстового содержимого и многого другого. В этой главе подробно описывается API выбора.

Настройка API

Вы можете настроить API напрямую, используя скрипт ниже. 

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

Методы выбора API

Ниже приведены наиболее важные методы в выборе API.

  • d3.selection ()
  • d3.select (селектор)
  • d3.selectAll (селектор)
  • selection.selectAll (селектор)
  • selection.filter (фильтр)
  • selection.merge (другое)
  • d3.matcher (селектор)
  • d3.creator (имя)
  • selection.each (функция)
  • selection.call (function [, arguments…])
  • d3.local ()
  • local.set (узел, значение)
  • local.get (узел)
  • local.remove (узел)

Давайте теперь обсудим каждый из них в деталях.

d3.selection ()

Этот метод используется для выбора корневого элемента. Эту функцию также можно использовать для проверки выбора или для расширения выбора d3js.

d3.select (селектор)

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

Пример. Рассмотрим следующий пример. 

var body = d3.select("body");

Если селектор не является строкой, то он выбирает указанный узел, который определен ниже. 

d3.select("p").style("color", "red");

d3.selectAll (селектор)

Этот метод выбирает все элементы, которые соответствуют указанной строке селектора.

Пример. Рассмотрим следующий пример. 

var body = d3.selectAll("body");

Если селектор не является строкой, то он выбирает указанный массив узлов, который определен ниже. 

d3.selectAll("body").style("color", "red");

selection.selectAll (селектор)

Этот метод используется для выбора элемента. Он выбирает элементы-потомки, которые соответствуют указанной строке селектора. Элементы в возвращенном выборе сгруппированы по их соответствующему родительскому узлу в этом выборе. Если ни один элемент не соответствует указанному селектору для текущего элемента или если селектор имеет значение null, группа с текущим индексом будет пустой.

Пример. Рассмотрим следующий пример. 

var b = d3.selectAll("p").selectAll("b");

selection.filter (фильтр)

Этот метод используется для фильтрации выбора, возвращая новый выбор, который содержит только элементы, для которых указанный фильтр является истинным.

Пример. Рассмотрим следующий пример. 

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Здесь фильтрация выбора строк таблицы возвращает только нечетные.

selection.merge (другое)

Этот метод используется для возврата нового выбора, объединенного с указанным другим выбором.

Пример. Рассмотрим следующий пример. 

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (селектор)

Этот метод используется для назначения указанного селектора. Возвращает функцию, которая возвращает true.

Пример. Рассмотрим следующий пример. 

var p = selection.filter(d3.matcher("p"));

d3.creator (имя)

Этот метод используется для присвоения имени указанному элементу. Он возвращает функцию, которая создает элемент с заданным именем, предполагая, что это родительский элемент.

Пример. Рассмотрим следующий пример. 

selection.append(d3.creator("p"));

selection.each (функция)

Этот метод используется для вызова указанной функции для каждого выбранного элемента в порядке, передаваемом текущим значением (d), текущим индексом (i) и текущей группой (узлами) с этим в качестве текущего элемента DOM (node ​​[i] ]). Это объясняется ниже. 

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call (function [, arguments…])

Он используется для вызова указанной функции ровно один раз. Синтаксис показан ниже. 

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Этот метод может быть указан, как показано ниже. 

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 local позволяет вам определять локальное состояние, которое не зависит от данных.

Пример. Рассмотрим следующий пример. 

var data = d3.local();

В отличие от var, значение каждой локальной области также ограничивается DOM.

local.set (узел, значение)

Этот метод устанавливает значение этого локального в указанном узле в значение.

Пример. Рассмотрим следующий пример. 

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

Этот метод возвращает значение этого локального на указанном узле. Если узел не определяет этот локальный объект, он возвращает значение от ближайшего предка, который его определяет.

local.remove (узел)

Этот метод удаляет значение этого локального из указанного узла. Он возвращает истину, если узел определен, в противном случае возвращает ложь.

46
Share: