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) и текущую группу (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.