D3 ввод, выход и обновление

Этот раздел демонстрирует, как использовать методы ввода и выхода D3 для детального контроля над поведением элементов при их добавлении, обновлении или удалении. Это особенно полезно при работе с переходами элементов. В этом разделе объясняется, как дополнительно контролировать поведение HTML и SVG элементов при их создании, обновлении или удалении. Это особенно важно, когда вы используете переходы и хотите получить определенный эффект (например, плавное появление и исчезновение элементов). Если вы новичок в D3, вы можете пропустить этот раздел! Связь данных демонстрирует примеры, которые обновляют HTML/SVG элементы одинаковым образом, независимо от того, были ли они только что созданы, уже существуют на странице или вскоре будут удалены. (Ново созданные HTML/SVG элементы называются элементами ввода, а элементы, которые вскоре будут удалены, называются элементами выхода.) В некоторых случаях полезно различать элементы ввода и выхода. Особенно это важно при работе с переходами. Например, если вы хотите, чтобы новые элементы плавно появлялись, вам нужно установить их начную прозрачность в ноль.Аналогично, если вы хотите, чтобы они плавно исчезали перед удалением, вам нужно установить переход для каждого элемента выхода, чтобы их прозрачность постепенно уменьшалась до нуля.

В D3 версиях 4 и ниже требуется использование методов выборки .enter и .exit. Однако с версии 5 метод .join скрывает сложности ввода и выхода. Если вы все еще используете версию 4, вы можете посмотреть оригинальную главу о вводе и выходе. Вы можете различать элементы ввода и выхода, передавая функции методу .join:

.join(
function(enter) {
  . . .
},
function(update) {
  . . .
},
function(exit) {
  . . .
}
)

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

• Параметр функции ввода enter представляет собой выборку ввода, которая содержит элементы, которые нужно создать.
• Параметр функции обновления update представляет собой выборку, которая содержит уже существующие элементы (и не содержит элементы выхода).
• Параметр функции выхода exit представляет собой выборку выхода, которая содержит элементы, которые нужно удалить. Метод .join возвращает выборку, которая содержит элементы ввода и существующие элементы (но не содержит элементы выхода). Обычно большинство ваших стилей и обновлений атрибутов будут следовать за методом .join. Обратите внимание, что функции ввода, обновления и выхода должны возвращать выборку.

Функция ввода

Обычно функция ввода должна прикреплять элемент к каждому элементу выборки ввода. (ввод выборки состоит из элементов-заполнителей, представляющих добавляемые элементы.) Например:

. join(
  function(enter) {
    return enter. append('circle');
  }
)

Это эквивалентно . join('circle'). Вы также можете вызывать общие методы выборки, такие как . style и . attr для выборки ввода. Это позволяет вам изменять стили и атрибуты элементов ввода. Например:

. join(
  function(enter) {
    return enter
      . append('circle')
      . style('opacity', 0);
  }
)

Функция обновления

Функция обновления является необязательной и позволяет вам обновлять уже существующие элементы. Например:

. join(
  function(enter) {
    return enter
      . append('circle')
      . style('opacity', 0);
  },
  function(update) {
    return update. style('opacity', 1);
  }
)

Это устанавливает прозрачность входящих кругов в 0, а прозрачность существующих кругов в 1.

Функция выхода

Функция выхода является необязательной и обрабатывает элементы HTML/SVG, которые нужно удалить. Обычно вам нужно удалить элементы из выборки выхода:

. join(
  function(enter) {
    return enter
      . append('circle')
      . style('opacity', 0);
  },
  function(update) {
    return update
      . style('opacity', 1);
  },
  function(exit) {
    return exit. remove();
  }
)

Примеры

Если вы не используете переходы, вам редко понадобится вышеупомянутая техника. Однако, если вы используете переходы и хотите контролировать, как элементы входят и выходят с страницы, вам понадобится вышеупомянутая техника. Для примеров использования переходов обратитесь к разделу Переходы. Чтобы помочь вам понять, ниже приведен пример, устанавливающий прозрачность входящих узлов в 0.25:

function getData() {
  let data = [];
  let numItems = Math.ceil(Math.random() * 5);
  for(let i = 0; i < numItems; i++) {
    data.push(40);
  }
  return data;
}
function update(data) {
  d3.select('.chart')
    .selectAll('circle')
    .data(data)
    .join(
      function(enter) {
        return enter.append('circle')
          .style('opacity', 0.25);
      },
      function(update) {
        return update.style('opacity', 1);
      }
    )
    .attr('cx', function(d, i) {
      return i * 100;
    })
    .attr('cy', 50)
    .attr('r', function(d) {
      return 0.5 * d;
    })
    .style('fill', 'orange');
}
function updateAll() {
  let myData = getData();
``````markdown
обновить(myData);
}
updateAll();
d3.select("button")
	.on("click", updateAll);

Приведённый выше пример не полностью отражает, как вы будете использовать функции enter, exit и update на практике. Для более представительного примера обратитесь к разделу переходы.