Connector hover

by sachid

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
<svg id="canvas" height="300" width="300">
  <rect x="50" y="50" width="100" height="100" fill="black" />
  <rect id="overlay" x="0" y="0" width="200" height="200" fill="blue" style="opacity:0" />
</svg>

JavaScript

var overlay = d3.select("#overlay");
var mouseOver = function() {
  return overlay.style("opacity", "0.5");
}
var mouseLeave = function() {
  return overlay.style("opacity", "0");
}
overlay.on("mouseover", mouseOver)
  .on("mouseleave", mouseLeave);