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 и vanilla. В vanilla, экспортируется глобальная переменная 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) и текущую группу (узлы), при этом this является текущим элементом DOM. Возвращаемое значение функции используется для установки атрибута каждого элемента. Нулевое значение удалит указанный атрибут.

Если заданные значения являются функцией, функция вычисляется для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), при этом 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) и текущую группу (узлы), при этом this является текущим элементом DOM. Возвращаемое значение функции используется для установки свойств стиля каждого элемента. Нулевое значение удалит указанные свойства стиля.

Если заданные значения являются функцией, функция вычисляется для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), при этом 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) и текущую группу (узлы), при этом this является текущим элементом DOM. Возвращаемое значение функции используется для установки свойств каждого элемента. Нулевое значение удалит указанные свойства.

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

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

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

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

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

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

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