Как получить (x, y) -координаты относительно происхождения элемента в d3 ВЕРСИЯ 4

Question

Как получить (x, y) -координаты относительно происхождения элемента в d3 ВЕРСИЯ 4

1

Я хотел бы получить координаты мыши относительно происхождения элемента, а не в начало страницы.

Если я правильно понял, это можно сделать с помощью d3.mouse(this) в версии 3 d3, например:

d3.select('svg').on('click', () => {
    let coor = d3.mouse(this)
    console.log(coor[0])
}

Однако, когда я пытаюсь это сделать в версии 4, я получаю "t.getBoundingClientRect не функция" - ошибка.

Я знаю, что вы можете получить координаты (x, y) относительно начала страницы, используя

d3.event.clientX or d3.event.clientY

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

Jelmer Dijkstra 06 фев. 2018, в 18:27

Источник

Теги:

javascript

d3.js

1 ответ

Ещё вопросы

altocumulus · Accepted Answer · 2018-02-06T15-07-00.000Z

Поскольку вы используете функцию стрелки в качестве обратного вызова для прослушивателя, this будет относиться к глобальному объекту, то есть, скорее всего, к window, который не имеет метода .getBoundingClientRect(), следовательно, ошибка. Это не имеет ничего общего с D3 и одинаково применимо ко всем его версиям. Существует два пути:

1. Используйте стандартное выражение функции.

    d3.select('svg').on('click', function() {
      let coor = d3.mouse(this);
      console.log(coor[0]);
    });

2. Получить текущий элемент с помощью параметров функции.

Согласно документам:

указанный слушатель будет оцениваться для элемента, передается текущая дата (d), текущий индекс (i) и текущая группа (узлы)

Чтобы получить текущий элемент, который в функции стрелки не упоминается как this, вы можете ссылаться на него как на nodes[i]. Тогда ваше выражение будет выглядеть следующим образом:

    d3.select('svg').on('click', (d, i, nodes) => {
      let coor = d3.mouse(nodes[i]);
      console.log(coor[0]);
    });

Потрясающе, кажется, это помогает. Так что, в конце концов, это не была проблема, связанная с d3 или версией ... Ну, чем больше вы знаете.