Constrain enter/exit events to only background div in d3.js

Question

I want to display a moving cross hairs with coordinates when the cursor is moved over a particular DIV containing an SVG.

On mouseenter I can successfully create a rect displaying the coordinates (and remove it on mouseout), however, moving the cursor over the newly created rect or text itself fires a mouseout mouseenter event cycle.

I've tried d3.event.stopPropagation() in several places, but none seem to work.

The picture shows if you carefully move the mouse onto the grey "screen" - the rect & text is created and stays in one place.

But if you move the cursor to touch "bobo" or the green rectangle, it starts moving.

var infoBox = null;

var theSVG = d3.select("#theScreen")
  .append("svg")
  .attr("width", 250)
  .attr("height", 250);

// Register mouse events
theSVG
  .on("mouseenter", mouseEnter)
  .on("mouseout",   mouseExit);

function mouseEnter()
{
    if (infoBox !== null)
      return;

  var coord = d3.mouse(d3.event.currentTarget);
  x1 = parseInt(coord[0]);
  y1 = parseInt(coord[1]);

  console.log("mouseEnter", x1, y1, infoBox);

  infoBox = theSVG.append("g")
    .attr('class', 'ssInfoBox');

  var rectItem = infoBox.append("rect")
  .attr('x', x1)
  .attr('y', y1)
  .attr('width',  30)
  .attr('height', 20);

  var textItem = infoBox.append("text")
  .attr('x', x1)
  .attr('y', y1)
  .text("bobo");
}

function mouseExit()
{
    if (infoBox === null)
    return;

    console.log("mouseExit", infoBox);
  infoBox.remove()
  infoBox = null;
}

The code doesn't implement the moving yet. To start, I just want the rect/text created and destroyed on mouseenter and mouseout.

How do I do that?

Link to Fiddle.

Oleg Imanilov · Answer 1 · 2019-05-13T16:23:17.887

0

You may create transparent div or any other tag on top of your svg with same size. Than handle mouse events of this overlay. This way you will not going be interrupted by internal components events. Downside - you will have to handle interaction with internals manually.

Like so:

<svg style="z-index:1;position:absolute;left:0;width:200px;top:0;height:200px">...</svg>

<div id="overlay" style="background:rgba(0,0,0,0);z-index:2;position:absolute;left:0;width:200px;top:0;height:200px"></div>

edited May 13 '19 at 16:23

answered May 13 '19 at 14:45

Oleg Imanilov

2,591
1
13
26

Yes, but the problem is when the mouse moves over top of the created text or rect. This generates a mouseout event which I don't want... – Danny May 13 '19 at 15:16
It will not, if you'll put overlay with higher ```z-index```. – Oleg Imanilov May 13 '19 at 15:17
1

Seems that SVG doesn't support `z-index`: https://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements – Danny May 13 '19 at 16:13
```z-index``` is general css supported by any tag. The overlay must be out of SVG! ```
``` – Oleg Imanilov May 13 '19 at 16:20

score 0 · Accepted Answer · answered May 13 '19 at 22:44

Instead of mouseout, use mouseleave.

The MDN has a good explanation about the differences between them: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

And here is your code with that change only:

var infoBox = null;

var theSVG = d3.select("#theScreen")
  .append("svg")
  .attr("width", 250)
  .attr("height", 250);

// Register mouse events
theSVG
  .on("mouseenter", mouseEnter)
  .on("mouseleave", mouseExit);

function mouseEnter() {
  if (infoBox !== null)
    return;

  var coord = d3.mouse(d3.event.currentTarget);
  x1 = parseInt(coord[0]);
  y1 = parseInt(coord[1]);

  console.log("mouseEnter", x1, y1, infoBox);

  infoBox = theSVG.append("g")
    .attr('class', 'ssInfoBox');

  var rectItem = infoBox.append("rect")
    .attr('x', x1)
    .attr('y', y1)
    .attr('width', 30)
    .attr('height', 20);

  var textItem = infoBox.append("text")
    .attr('x', x1)
    .attr('y', y1)
    .text("bobo");
}

function mouseExit() {
  if (infoBox === null)
    return;

  console.log("mouseExit", infoBox);
  infoBox.remove()
  infoBox = null;
}

#container {
  width: 400px;
  height: 400px;
  background-color: #0BB;
}

#theScreen {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 250px;
  height: 250px;
  background-color: #333;
  cursor: crosshair;
}

.ssInfoBox rect {
  fill: #383;
}

.ssInfoBox text {
  fill: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id='container'>
  <div id='theScreen'>
  </div>
</div>

Constrain enter/exit events to only background div in d3.js

2 Answers2