title: How to point React component with this in a function?
body: <p>I am trying to create a filler gauge with D3.js and React integrated. First of all, please take a look at my code below:</p>
  
  <pre><code>componentDidMount() {
    renderOuterGauge();
    renderInnerGauge();
  }
  
  componentDidUpdate() {
    renderOuterGauge();
  }
  
  renderInnerGauge = () =&gt; {
    const innerGauge = this.svg.append('path')
      .attr('transform', 'translate(60,100)')
      .attr('stroke', 'transparent')
      .attr('d', 'M0,0 l440,-60 v100 h-440 v-40')
      .on('click', function(d) {
        const x = d3.mouse(this)[0];
        const yUP = x / (440 / -60);
        const score = x / 4.38;
        console.log(score);
        this.setState({
          score: score
        })
        d3.event.this.setAttribute('d', `M0,0 l${x},${yUP} v${yUP+40} h${-x} v-40`);
        d3.event.this.setAttribute('fill', 'forestgreen');
      })
  }
  </code></pre>
  
  <p>As shown above, I'm trying to fill inner gauges dynamically using <code>this.setState</code> method, but since the method call is in a closure, I cannot use <code>setState</code> on <code>this</code>. </p>
  
  <p>Usually I can fix this with using arrow function definition, however as far as I know, in order to get <code>x</code> and <code>y</code> value using <code>d3.mouse(this)</code> in the gauge, I cannot use arrow function. For such cases, is there a way to point <code>this</code> as the react component AND use the mouse method in the same function?</p>