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.