D3 Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id='container'>
  <div id='theScreen'>
  </div>
</div>

CSS

#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;
}

JavaScript

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;
}