title: Problem when using several functions in the mouseover event handler
body: <p>I am working with d3v5 and currently trying to make a node of a force-directed graph:</p>
  <ol>
  <li>fade out the nodes which are not directly connected to the 'mouse-over'ed' node</li>
  <li>enlarge the node at hand</li>
  </ol>
  <p>So far I have managed the former but I can not manage for any function to get triggered alongside the <code>fade()</code> function. Consider:</p>
  <pre><code> var node = svg
      .append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;nodes&quot;)
      .selectAll(&quot;circle&quot;)
      .data(graph.nodes)
      .enter()
      .append(&quot;circle&quot;)
      .attr(&quot;r&quot;, function (d) {
        return 1.5 * Math.sqrt(d.weight);
      })
      .attr(&quot;fill&quot;, function (d) {
        return &quot;red&quot;;
      })
      .call(
        d3
          .drag()
          .on(&quot;start&quot;, dragstarted)
          .on(&quot;drag&quot;, dragged)
          .on(&quot;end&quot;, dragended)
      )
      .on(&quot;mouseover&quot;, fade(0.2))
      .on(&quot;mouseout&quot;, fade(1));
  </code></pre>
  <p>and the 'fade' function:</p>
  <pre><code>  function fade(opacity) {
      return function (d) {
        // check all other nodes to see if they're connected
        // to this one. if so, keep the opacity at 1, otherwise
        // fade
        node.style(&quot;stroke-opacity&quot;, function (o) {
          thisOpacity = isConnected(d, o) ? 1 : opacity;
          return thisOpacity;
        });
        node.style(&quot;fill-opacity&quot;, function (o) {
          thisOpacity = isConnected(d, o) ? 1 : opacity;
          return thisOpacity;
        });
        // also style link accordingly
        link.style(&quot;stroke-opacity&quot;, function (o) {
          return o.source.name === d.name || o.target.name === d.name
            ? 1
            : opacity;
        });
        text.style(&quot;fill-opacity&quot;, function (o) {
          thisOpacity = isConnected(d, o) ? 1 : opacity;
          return thisOpacity;
        });
      };
    }
  </code></pre>
  <p>So far everything works as it's supposed to. However as I started looking around to have another function execute on mouseover (and mouseout), I attempted the conventional method, as follows:</p>
  <pre><code>  var node = svg
      //...
      .on(&quot;mouseover&quot;, function (d) {
        console.log(&quot;make node bigger&quot;)
        fade(0.2);
      })
      .on(&quot;mouseout&quot;, function (d) {
        console.log(&quot;make node smaller&quot;)
        fade(1);
      });
  </code></pre>
  <p>The two console messages are outputted, but the <code>fade()</code> function does not execute. I tried putting <code>return fade(...);</code> but to no avail.</p>
  <p>I'd appreciate any insight on why this is happening. Thank you.</p>