d3-selection-multi

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

d3.select("body").append("div")
    .attrs({
      title: "A cheery, timeless greeting.",
      class: "greeting"
    })
    .text("Hello, world!");

Это эквивалентно:

d3.select("body").append("div")
    .attr("title", "A cheery, timeless greeting.")
    .attr("class", "greeting")
    .text("Hello, world!");

Как и выборка.attr, значения в объекте с множественными значениями могут быть функциями данных:

d3.select("body").append("div")
    .attrs({
      title: function(d) { return d.title; },
      id: function(d, i) { return "id-" + i; },
    });

Кроме того, вы можете передать функцию, которая возвращает объект, что позволяет вам совместно использовать вычислительные ресурсы для нескольких атрибутов или определить, какой атрибут установить динамически:

d3.select("body").append("div")
    .attrs(function(d, i) { return {title: d.title, id: "id-" + i}; });

Этот модуль не включён в стандартный набор D3 ради компактности: методы с одним значением, такие как выборка.attr, рекомендуются для большинства пользователей, так как преимущества сокращённого синтаксиса, предоставляемого этими удобными методами, незначительны.

Установка

Если вы используете NPM, npm install d3-selection-multi. В противном случае загрузите последнюю версию или загрузите напрямую с d3js.org в качестве отдельной библиотеки. Поддерживаются AMD, CommonJS и обычные среды. В обычных средах экспортируется глобальная переменная d3:

<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script>

var div = d3.selectAll("div")
    .attrs({title: "Hello, world!"})
    .styles({"color": "red"});

</script>

Или, в сочетании со стандартным набором D3:

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

var div = d3.selectAll("div")
    .attrs({title: "Hello, world!"})
    .styles({"color": "red"});

</script>

Попробуйте d3-selection-multi в своём браузере.

Справочник API

выборка.attrs(значения)

Удобный метод поверх выборка.attr для установки нескольких атрибутов. Если указанные значения — это объект, значения могут быть указаны как строки или функции. Например:

selection.attrs({foo: "foo-value", bar: function(d) { return d.bar; }});

Если значение является константой, всем элементам присваивается одно и то же значение атрибута; в противном случае, если значение является функцией, функция вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), при этом this — это текущий элемент DOM. Возвращаемое значение функции используется для установки атрибута каждого элемента. Нулевое значение удалит указанный атрибут.

Если указанные значения — это функция, функция вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), при этом this — это текущий элемент DOM. Возвращаемое значение функции должно быть объектом со строковыми значениями, которые затем используются для установки атрибутов текущего элемента. Например:

selection.attrs(function(d) { return {foo: "foo-value", bar: d.bar}; });

Передача функции в выборка.attrs удобна для совместного использования вычислительных ресурсов или состояния между несколькими атрибутами или для динамического определения устанавливаемых атрибутов.

выборка.styles(значения[, приоритет])

Удобный метод поверх выборка.style для установки нескольких свойств стиля. Если указанные значения — это объект, значения могут быть указаны как строки или функции. Например:

selection.styles({fill: "red", stroke: function(d) { return d.stroke; }});

Если значение является константой, всем элементам присваивается одно и то же значение свойства стиля; в противном случае, если значение является функцией, функция вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), при этом this — это текущий элемент DOM. Возвращаемое значение функции используется для установки свойств стиля каждого элемента. Нулевое значение удалит указанные свойства стиля.

Если указанные значения — это функция, функция вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), при этом this — это текущий элемент DOM. Возвращаемое значение функции должно быть объектом со строковыми значениями, которые затем используются для установки свойств стиля текущего элемента. Например:

selection.styles(function(d) { return {fill: "red", stroke: d.stroke}; });

Передача функции в выборка.styles удобна для совместного использования вычислительных ресурсов или состояния между несколькими свойствами стиля или для динамического определения устанавливаемых свойств стиля.

выборка.properties(значения)

Удобный метод поверх выборка.property для установки нескольких свойств элементов. Если указанные значения — это объект, значения могут быть указаны как строки или функции. Например:

selection.properties({foo: "foo-value", id: function(d, i) { return "id-" + i; }});

Если значение является константой, всем элементам присваивается одно и то же значение свойства; в противном случае, если значение является функцией, функция вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), при этом this — это текущий элемент DOM. Возвращаемое значение функции используется для установки свойств каждого элемента. Нулевое значение удалит указанные свойства.

Если указанные значения — это функция, функция вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), при этом this — это текущий элемент DOM. Возвращаемое значение функции должно быть объектом со строковыми значениями, которые затем используются для установки свойств текущего элемента. Например:

selection.properties(function(d, i) { return {foo: "foo-value", id: "id-" + i}; });

Передача функции в выборка.properties удобна для совместного использования вычислительных ресурсов или состояния между несколькими свойствами или для динамического определения устанавливаемых свойств.

переход.attrs(значения)

Как и выборка.attrs, но для переход.attr.

переход.styles(значения[, приоритет])

Как и выборка.styles, но для переход.style.