event-fin

<!DOCTYPE html>
<meta charset = "utf-8">
<body>
    <svg height="500">
        <rect transform="translate(100, 100)" width="50" height="50"></rect>
    </svg>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
    <script>

      d3.selectAll('rect')
        .on('mouseenter.e1', function() {
          d3.select(this)
            .style('fill', 'red');
          console.log('mouseenter.e1');
        })
        .on('mouseenter.e2', function() {
          d3.select(this)
            .attr('width', 100)
            .attr('height', 100);
          console.log('mouseenter.e2');
        })
        .on('mouseleave.e1', function() {
          d3.select(this)
            .style('fill', 'black');
          console.log('mouseleave.e1');
        })
        .on('mouseleave.e2', function() {
          d3.select(this)
            .attr('width', 50)
            .attr('height', 50);
          console.log('mouseleave.e2');
        })

    </script>
</body>