D3.js - API выбора

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

Настройка API

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

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

</script>

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

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

  • d3.selection()
  • d3.select(selector)
  • d3.selectAll(selector)
  • selection.selectAll(selector)
  • selection.filter(filter)
  • selection.merge(other)
  • d3.matcher(selector)
  • d3.creator(name)
  • selection.each(function)
  • selection.call (функция [, аргументы…])
  • d3.local()
  • local.set (узел, значение)
  • local.get(node)
  • local.remove(node)

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

d3.selection ()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

selection.filter (фильтр)

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

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

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

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

selection.merge (другое)

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

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

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

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

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

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

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

d3.creator (имя)

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

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

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

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

Этот метод используется для вызова указанной функции для каждого выбранного элемента в порядке, передаваемом текущим элементом данных (d), текущим индексом (i) и текущей группой (узлами) с этим в качестве текущего элемента DOM (nodes [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 name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

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

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

d3.local ()

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

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

var data = d3.local();

В отличие от var, значение каждого локального значения также определяется моделью DOM.

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

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

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

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

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

local.remove (узел)

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