событие mousemove, доступ к этому контексту

Question

Прежде всего, я использую D3js внутри компонента React, поэтому я использую некоторую переменную моего класса для сохранения данных, например: this.graphicalId = 'test';

У меня есть два элемента в моем элементе d3, svgViewport, который является элементом g, и streams, которые являются элементами пути. У меня есть .on('mousemove' дескриптор события для каждого.

В событии streams я хотел бы сохранить имя текущего потока, используя d3.select(this) (обратите внимание, что я в функции (), а не в функции стрелки, так что это локально) в глобальной переменной, чтобы используйте его в событии svgViewport.

Моя проблема в том, что, как будто я нахожусь в функции () this является локальным и не ссылается на мой экземпляр класса, поэтому я не могу сохранить значение в переменной-члене this.currentStreamName.

немного кода:

svgViewport.on('mousemove', function (d, i) {
    if (mouseIsOverStream) {
        let mousex = d3.mouse(this);
        mousex = mousex[0];
        // here I want this of the class instance context
        this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex);
    }
});

Есть ли у вас какие-либо советы, чтобы справиться с этим?

Спасибо.

Answer 1

Вы можете использовать функции стрелок, чтобы получить доступ к контексту this экземпляра и по-прежнему получать текущий элемент DOM. Для элемента DOM вы прибегаете к малоизвестному и часто пропускаемому третьему параметру прослушивателя событий. Как есть в документации (выделено мое):

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

Поскольку текущий индекс i является указателем на текущую группу nodes, вы можете ссылаться на текущий элемент DOM как nodes[i].

Ваш код становится:

svgViewport.on('mousemove', (d, i, nodes) => {
    if (mouseIsOverStream) {
        let mousex = d3.mouse(nodes[i]);  // get the current element as nodes[i]
        mousex = mousex[0];
        // this now refers to your instance
        this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex);
    }
});

Answer 2

Сохранение контекста класса в переменной вне привязки события. Затем создайте IIFE и свяжите его контекст с сохраненным.

componentDidMount() {
  const ctx = this;
  svgViewport.on('mousemove', function (d, i) {
    if (mouseIsOverStream) {
      let mousex = d3.mouse(this);
      mousex = mousex[0];
      !function () {
        // here I want this of the class instance context
        this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex);
      }.bind(ctx)();
    }
  });
}

Кроме того, это тоже должно работать:

componentDidMount() {
  svgViewport = ...;
  svgViewport.on('mousemove', (d, i) => {
    if (mouseIsOverStream) {
      let mousex = d3.mouse(svgViewport); // here
      mousex = mousex[0];
      this.nearestTickPosition, this.currentStreamName = findNearestTickPosition(mousex);
    }
  });
}