title: d3js - How to use the `this` keyword or what is the alternate?
body: <p>When user click on the <code>legend</code> i am hiding and showing the <code>path</code>. it works. But as well i would like to keep the <code>legend</code> as semi-transparent, when the <code>path</code> was hidden.</p>
  
  <p>for that, I am trying to add the style to the <code>legend</code> using the <code>this</code> key word but it's not working.</p>
  
  <p>what is the correct way to do this? her is my code :</p>
  
  <pre><code>legends.on('click', function(d, i) {
      var path = d3.select("#" + d.name);
      var visibility = path.style('opacity');
      path.style("opacity", visibility == 1 ? 0 : 1);
  
      if (!visibility) {
  
          d3.select(this).style('opacity', 0.5);//not working!
          this.style('opacity', 0.5);//not working!
  
      }
  
  });
  </code></pre>
  
  <p><strong>update</strong></p>
  
  <p>tried this way still not works:</p>
  
  <pre><code>legends.forEach(function(group) {
  
      var legend = group;
  
      legend.on('click', function(d, i) { //throws error
  
          var path = d3.select("#" + d.name);
          var visibility = path.style('opacity');
          path.style("opacity", visibility == 1 ? 0 : 1);
  
          console.log(legend);
  
      });
  
  })
  </code></pre>
  
  <p><strong>update</strong></p>
  
  <p>On click consoled <code>this</code> - is :
  <a href="https://i.stack.imgur.com/XCctt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XCctt.png" alt="console"></a></p>