D3-drag

D3 имеет модуль, который позволяет добавлять поведение перетаскивания к элементам. Перетаскивание — это действие, при котором указатель мыши наводится на элемент, нажимается кнопка мыши, указатель перемещается, а затем кнопка мыши отпускается, чтобы переместить элемент. Модуль перетаскивания D3 также поддерживает жесты касания.

Если в повседневной разработке не требуется добавлять событие drag к диаграммам, то эта глава не является важной и может быть пропущена.

Чтобы сделать HTML/SVG элементы перетаскиваемыми, требуется три шага:

• Создать функцию drag behavior с помощью d3.drag()
• Добавить обработчик событий, который будет вызван при событии перетаскивания. Обработчик событий принимает объект события, который можно использовать для обновления позиции перетаскиваемого элемента
• Привязать поведение перетаскивания к элементу, который требуется сделать перетаскиваемым

Вызов d3.drag() создает поведение перетаскивания:

let drag = d3.drag();

Drag behavior — это функция, которая добавляет слушатели событий к элементам. У него также есть методы, такие как .on, где можно определить события.Метод .on позволяет привязать обработчики событий к поведению перетаскивания. Это принимает два параметра:

• Тип события ( 'drag', 'start' или 'end')
• Имя функции обработчика события

function handleDrag(e) {
  // обновить перетаскиваемый элемент его новой позицией
}
let drag = d3.drag()
  .on('drag', handleDrag);

Тип события 'drag' включает 'start' и 'end'. 'drag' указывает на перетаскивание. 'start' указывает на начало перетаскивания (например, пользователь нажал кнопку мыши). 'end' указывает на окончание перетаскивания (например, пользователь отпустил кнопку мыши).Функция handleDrag принимает один параметр e, который представляет объект события перетаскивания. Объект события перетаскивания имеет несколько свойств, из которых наиболее полезными являются: | Свойство | Описание | | :------ | :------- | | .subject | Связанные данные перетаскиваемого элемента (или объекта-запасного) | | .x & .y | Новые координаты перетаскиваемого элемента | | .dx & .dy | Изменение координат перетаскиваемого элемента относительно предыдущих координат | Полный список свойств событий перетаскивания можно найти в официальной документации.Если перетаскиваемый элемент был создан с помощью соединения данных и связанные данные имеют свойства x и y, то вычисляются свойства .x и .y объекта события перетаскивания, чтобы сохранить относительное положение элемента и указателя. (Это можно предотвратить, чтобы центр элемента не "захватывал" позицию указателя.) В противном случае, относительная позиция указателя относительно родительского элемента, к которому перетаскивается элемент, вычисляется относительно родительского элемента. y``x``y Таким образом, можно добавить поведение перетаскивания к элементу, выбрав элемент и передав поведение перетаскивания методу .call.

Например, добавление поведения перетаскивания к элементу circle:

d3.select('svg')
  .selectAll('circle')
  .call(drag);

Поведение перетаскивания — это функция, которая устанавливает слушателей событий на выбранных элементах (каждом элементе в примере выше). Когда происходит событие перетаскивания, обработчик событий (например, handleDrag в примере выше) вызывается.

Пример

В следующем коде случайные координаты массива связаны с элементами circle. Создается поведение перетаскивания с помощью d3.drag() и оно присоединяется к элементам circle (функция initDrag). Когда элемент circle перетаскивается, вызывается handleDrag, и передается объект события e в качестве первого параметра. Свойства x и y связанного данных e.subject обновляются до значений e.x и e.y. Затем вызывается функция update, чтобы обновить положение элемента circle.

let data = [], width = 600, height = 400, numPoints = 10;
let drag = d3.drag()
  .on('drag', handleDrag);
function handleDrag(e) {
  e.subject.x = e.x;
  e.subject.y = e.y;
  update();
}
function initDrag() {
  d3.select('svg')
    .selectAll('circle')
    .call(drag);
}
function updateData() {
  data = [];
  for(let i = 0; i < numPoints; i++) {
    data.push({
      id: i,
      x: Math.random() * width,
      y: Math.random() * height
    });
  }
}
function update() {
  d3.select('svg')
    .selectAll('circle')
    .data(data)
    .join('circle')
    .attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; })
    .attr("fill", (d, i) => d3.schemeCategory10[i % 10])
    .attr('r', 40);
}
updateData();
update();
initDrag();

com/32726183/199651629-952b4bd6-0dbe-4d0e-8840-52ea8a3f0275.gif)

https://codepen.io/wantnocode/pen/VwXgvwZ

D3-Brushing

Brushing позволяет пользователю указать область (через нажатие кнопки мыши, перемещение мыши, затем выделение), например, выбрать набор элементов. D3 имеет модуль, который добавляет поведение Brush к элементу (или к нескольким элементам). Добавление поведения Brush к HTML или SVG элементу состоит из трех шагов:

• call d3.brush() создает функцию Brush - Добавьте функцию-обработчик, которая будет вызвана при активации события. Функция отвечает за получение области действия Brush, после чего можно использовать эту область для выбора элементов, определения области масштабирования и т. д.
• Добавьте поведение Brush к элементу (или к нескольким элементам). call d3.brush() создает поведение Brush:

  let brush = d3.brush();

  Поведение Brush является функцией, которая имеет метод .on, определенный на нем. Эта функция сама добавляет слушателей к элементам и другим элементам (в основном к элементам rect), чтобы отображать область действия Brush. Метод .on может быть использован для присоединения обработчиков событий к поведению Brush. Это принимает два параметра:

  • Тип события ('brush','start','end')
  • Функция-обработчик (function)

  function handleBrush(e) {
    // Получена область, можно выбрать элементы
  }
  let brush = d3.brush()
    .on('brush', handleBrush);

  Тип события 'brush' включает 'start' и 'end'. 'brush' указывает, что область изменилась. 'start' указывает, что Brush начался (например, пользователь нажал кнопку мыши). 'end' указывает на окончание Brush (например, пользователь отпустил кнопку мыши). Функция handleBrush принимает один параметр e, который представляет объект события Brush. Самым полезным свойством события Brush является .selection, которое представляет область действия Brush в виде массива [[x0, y0], [x1, y1]], где x0, y0 и x1, y1 представляют диагональ Brush. Обычно handleBrush вычисляет, какие элементы находятся в области действия Brush, и обновляет их соответствующим образом. Поведение Brush можно присоединить к элементам, передав его в метод [.call]():

d3.select('svg')
  .call(brush);

Пример

В следующем примере используется d3.brush() для создания поведения Brush. Метод .on используется для добавления обработчика событий handleBrush к поведению Brush взаимодействия. handleBrush вызывается каждый раз, когда Brush начинается ('start' тип события) или когда область действия изменяется ('brush' тип события). Поведение Brush добавляется к элементу svg с помощью call.

let brush = d3.brush()
  .on('start brush', handleBrush);
function handleBrush(e) {
  // Используйте область действия `Brush` e.selection для вычисления, например, каких элементов выбрать
}
function initBrush() {
  d3.select('svg')
    .call(brush);
}
initBrush();

Пожалуйста, посмотрите на следующий полный пример, который использует updateData и update, чтобы связать последовательность случайных координат с элементами circle. Когда brush (курсор мыши) активен, элементы circle в области действия brush становятся красными. initBrush инициализирует brush. Когда brush активируется, вызывается handleBrush. Программа будет принимать объект события brush, который содержит свойство selection, определяющее область выделения. Затем эта область сохраняется в переменную brushExtent и используется в функции update.Функция update выполняет data join, если данные находятся в пределах brushExtent, и изменяет цвет элементов circle на красный.

```javascript
let data = [], width = 600, height = 400, numPoints = 100;
let brush = d3.brush()
  .on('start brush', handleBrush);
let brushExtent;

function handleBrush(e) {
  brushExtent = e.selection;
  update();
}

function initBrush() {
  d3.select('svg g')
    .call(brush);
}

function updateData() {
  data = [];
  for (let i = 0; i < numPoints; i++) {
    data.push({
      id: i,
      x: Math.random() * width,
      y: Math.random() * height
    });
  }
}

function isInBrushExtent(d) {
  return brushExtent &&
    d.x >= brushExtent[0][0] &&
    d.x <= brushExtent[1][0] &&
    d.y >= brushExtent[0][1] &&
    d.y <= brushExtent[1][1];
}

function update() {
  d3.select('svg')
    .selectAll('circle')
    .data(data)
    .join('circle')
    .attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; })
    .attr('r', 4)
    .style('fill', function(d) {
      return isInBrushExtent(d) ? 'red' : null;
    });
}

initBrush();
updateData();
update();