title: How to change style of lines using PIXI.js Graphics?
body: <p>I am trying to change alpha and color on <code>mouseover</code> or <code>mousedown</code>, but the display is not changing.</p>
  <p>When I used the Text class, it worked. I changed the style from normal to bold as follows:</p>
  <pre><code>class Leaf extends PIXI.Text{
      ...
      this.interactive = true;
      this.on('mouseover', function () {        
          this.style.fontWeight = 'bold';           
      });
  }
  </code></pre>
  <p>Then I tried to change the color of lines/links/edges of my view, but it is not working:</p>
  <pre><code>class TreeEdge extends Graphics{
      constructor(d){
          super();
          this.data = d;
          let p0 = project(d.source.x, d.source.y);  
          let p1 = project(d.target.x, d.target.y);        
          this.lineStyle(1, d.target.color, 1);
          this.moveTo(p0[0], p0[1]);               
          this.lineTo(p1[0], p1[1]);
          this.endFill(); 
  
          this.hitArea = this.getBounds();
          this.interactive = true;
          this.on('mouseover', function () {                      
              this.alpha = 1;           
          });
      }
  }
  </code></pre>
  <p>I tried <code>this.lineAlpha</code>, <code>this.alpha</code>, <code>this.GraphicsData[0].lineAlpha</code>... <code>this.clear()</code> and <code>this.dirty++</code>. Nothing changes. I tried to change color as well, with <code>this.color</code> and <code>this.lineStyle(1, node.color, 1);</code>.</p>
  <p>It seems I need to update the render or something.
  What is the best approach to update graphics elements with user interaction?</p>
  <p>I am using pixi.js - v4.7.3</p>
  <p>Initiating my app like so:</p>
  <pre><code>var app = new PIXI.Application(width, height, {
          backgroundColor: 0xffffff,
          antialias: true,
          transparent: false,
          resolution: 1
      });
  </code></pre>