d3 event callback context changes in Babel

Question

I have a class where a function binds mouse events to SVG element:

class Chart {

  bindEvent() {

    this.svg.append('rect')
      .on('mousemove', () => {
        const mouseDate = scales.x.invert(d3.mouse(this)[0]);
      });

  }

}

Which then babel transpiles into:

var Chart = function () {
  function Chart() {
    _classCallCheck(this, Chart);
  }

  _createClass(Chart, [{
    key: 'bindEvent',
    value: function bindEvent() {
      var _this = this;

      this.svg.append('rect').on('mousemove', function () {
        var mouseDate = scales.x.invert(d3.mouse(_this)[0]);
      });
    }
  }]);

  return Chart;
}();

So within the event callback 'this' changes '_this' and I loose context. Is there a way to manage this issue?

I recommend to always read documentation before you use a new feature. It's beyond me how people can read/learn about arrow functions and *not* learn about how they resolve `this` at the same time. — Felix Kling, Apr 01 '16 at 20:54

score 2 · Accepted Answer · answered Apr 01 '16 at 19:40

2

Fat arrow works that way by definition. It's possibly cleanest to use a regular function instead.

answered Apr 01 '16 at 19:40

Juho Vepsäläinen

26,573
12
79
105

d3 event callback context changes in Babel

1 Answers1