mmakowski · April 12, 2016 16:39
diff --git a/gistfile1.html b/gistfile1.html
 <html>
 <head>
 <style media="screen" type="text/css">
 #content {
  margin-top: 2em;
  font-size: 16pt;
  font-family: monospace;
 }
 #nodes {
  top: 0px;
  left: 700px;
  float: right; 
  position: absolute;
 }
 .T {
  background: #bbeeff; 
  color: #446688; 
  position: absolute; 
  width: 2em;
  top: -1.5em; 
  left: 50%;
  margin-left: -1em;
  text-align: center;
  font-size: 8pt;
  border: solid 1px #446688;
  visibility: hidden;
 }
 .SB {
  border-bottom: solid 1px #ff4444;
  border-left: solid 1px #ff4444;
  border-right: solid 1px #ff4444;
  // TODO: height: 0.5em;
 }
 </style>
 <script src="d3.min.js"></script>
 </head>
 <body>
 <div id="canvas"></div>
 <div id="spanbox" style='float:left; position:absolute; top:2em; left:2em'>

 <div id="content">
 <span class="SB" id="sb1"><span class="sbstart" id="sb1start"></span><span style="position: relative" id="mary1"><span class="T">NN</span>Mary</span> had a lamb.<span id="sb1end"></span></span> <span class="SB" id="sp2"><span id="sb2start"></span>Mary ate the lamb.<span id="sb2end"></span></span> <span class="SB" id="sb3"><span id="sb3start"></span>Mary rejoiced.<span id="sb3end"></span></span>
 </div>

 <div id="nodes">
 <div id="people">People:
 <span class="person" id="mary" ids="mary1">Mary</span>
 </div>
 </div>

 </div>
 </body>
 <script type="application/x-javascript"> 

 // after http://stackoverflow.com/a/623770/424978

 function generateNodeSet() {
  var spans = document.getElementsByTagName("span");
  var retarr = [];
  for (var i=0;i<spans.length; i++) { 
     retarr[retarr.length] = spans[i].id; 
  } 
  return retarr; 
 } 

 function generateLinks(nodeIds) { 
  var retarr = []; 
  for(var i=0; i<nodeIds.length; i++) { 
    var id = nodeIds[i];
    var span = document.getElementById(id);
    if (!span) continue; 
    var atts = span.attributes; 
    var ids_str = false; 
    if((atts.getNamedItem) && (atts.getNamedItem('ids'))) { 
      ids_str = atts.getNamedItem('ids').value; 
    } 
    if(ids_str) { 
      retarr[id] = ids_str.split(" ");
    }
  } 
  return retarr; 
 } 

 function drawArrow(graph, fromelem, toelem) {
  var canvasdiv = document.getElementById("canvas");
  var spanboxdiv = document.getElementById("spanbox");
  var nodesdiv = document.getElementById("nodes");
  var contentdiv = document.getElementById("content");
  var canvasTop = canvasdiv.offsetTop - spanboxdiv.offsetTop; 

  var x1 = fromelem.offsetLeft + spanboxdiv.offsetLeft + nodesdiv.offsetLeft - canvasdiv.offsetLeft; 
  var x2 = toelem.offsetLeft + toelem.offsetWidth + spanboxdiv.offsetLeft + contentdiv.offsetLeft - canvasdiv.offsetLeft;
  var y1 = fromelem.offsetTop + fromelem.offsetHeight - canvasTop;
  var y2 = toelem.offsetTop + toelem.offsetHeight - canvasTop;
  graph.append("svg:line")
      .attr("x1", x1)
      .attr("y1", y1)
      .attr("x2", x2)
      .attr("y2", y2)
      .style("stroke", "rgb(0,180,0)");
 }

 var canvasTop = 0;

 function draw() { 
  nodeset = generateNodeSet(); 
  linkset = generateLinks(nodeset);

  var lineGraph = d3.select("#canvas")
    .append("svg:svg")
    .attr("width", 1000)
    .attr("height", 1000); 

  for(var key in linkset) {  
    for (var i=0; i<linkset[key].length; i++) {  
      fromid = key; 
      toid = linkset[key][i]; 
      drawArrow(lineGraph,document.getElementById(fromid),document.getElementById(toid));
    } 
  } 
 } 

 function drawLink(graph, x1, y1, x2, y2) {
 }

 function undraw() {
  d3.selectAll(document.getElementById("canvas").childNodes).remove()
 }

 document.getElementById("mary").onmouseover = draw;
 document.getElementById("mary").onmouseout = undraw

 </script> 
 </html>
	<html>
	<head>
	<style media="screen" type="text/css">
	#content {
	margin-top: 2em;
	font-size: 16pt;
	font-family: monospace;
	}
	#nodes {
	top: 0px;
	left: 700px;
	float: right;
	position: absolute;
	}
	.T {
	background: #bbeeff;
	color: #446688;
	position: absolute;
	width: 2em;
	top: -1.5em;
	left: 50%;
	margin-left: -1em;
	text-align: center;
	font-size: 8pt;
	border: solid 1px #446688;
	visibility: hidden;
	}
	.SB {
	border-bottom: solid 1px #ff4444;
	border-left: solid 1px #ff4444;
	border-right: solid 1px #ff4444;
	// TODO: height: 0.5em;
	}
	</style>
	<script src="d3.min.js"></script>
	</head>
	<body>
	<div id="canvas"></div>
	<div id="spanbox" style='float:left; position:absolute; top:2em; left:2em'>

	<div id="content">
	<span class="SB" id="sb1"><span class="sbstart" id="sb1start"></span><span style="position: relative" id="mary1"><span class="T">NN</span>Mary</span> had a lamb.<span id="sb1end"></span></span> <span class="SB" id="sp2"><span id="sb2start"></span>Mary ate the lamb.<span id="sb2end"></span></span> <span class="SB" id="sb3"><span id="sb3start"></span>Mary rejoiced.<span id="sb3end"></span></span>
	</div>

	<div id="nodes">
	<div id="people">People:
	<span class="person" id="mary" ids="mary1">Mary</span>
	</div>
	</div>

	</div>
	</body>
	<script type="application/x-javascript">

	// after http://stackoverflow.com/a/623770/424978

	function generateNodeSet() {
	var spans = document.getElementsByTagName("span");
	var retarr = [];
	for (var i=0;i<spans.length; i++) {
	retarr[retarr.length] = spans[i].id;
	}
	return retarr;
	}

	function generateLinks(nodeIds) {
	var retarr = [];
	for(var i=0; i<nodeIds.length; i++) {
	var id = nodeIds[i];
	var span = document.getElementById(id);
	if (!span) continue;
	var atts = span.attributes;
	var ids_str = false;
	if((atts.getNamedItem) && (atts.getNamedItem('ids'))) {
	ids_str = atts.getNamedItem('ids').value;
	}
	if(ids_str) {
	retarr[id] = ids_str.split(" ");
	}
	}
	return retarr;
	}

	function drawArrow(graph, fromelem, toelem) {
	var canvasdiv = document.getElementById("canvas");
	var spanboxdiv = document.getElementById("spanbox");
	var nodesdiv = document.getElementById("nodes");
	var contentdiv = document.getElementById("content");
	var canvasTop = canvasdiv.offsetTop - spanboxdiv.offsetTop;

	var x1 = fromelem.offsetLeft + spanboxdiv.offsetLeft + nodesdiv.offsetLeft - canvasdiv.offsetLeft;
	var x2 = toelem.offsetLeft + toelem.offsetWidth + spanboxdiv.offsetLeft + contentdiv.offsetLeft - canvasdiv.offsetLeft;
	var y1 = fromelem.offsetTop + fromelem.offsetHeight - canvasTop;
	var y2 = toelem.offsetTop + toelem.offsetHeight - canvasTop;
	graph.append("svg:line")
	.attr("x1", x1)
	.attr("y1", y1)
	.attr("x2", x2)
	.attr("y2", y2)
	.style("stroke", "rgb(0,180,0)");
	}

	var canvasTop = 0;

	function draw() {
	nodeset = generateNodeSet();
	linkset = generateLinks(nodeset);

	var lineGraph = d3.select("#canvas")
	.append("svg:svg")
	.attr("width", 1000)
	.attr("height", 1000);

	for(var key in linkset) {
	for (var i=0; i<linkset[key].length; i++) {
	fromid = key;
	toid = linkset[key][i];
	drawArrow(lineGraph,document.getElementById(fromid),document.getElementById(toid));
	}
	}
	}

	function drawLink(graph, x1, y1, x2, y2) {
	}

	function undraw() {
	d3.selectAll(document.getElementById("canvas").childNodes).remove()
	}

	document.getElementById("mary").onmouseover = draw;
	document.getElementById("mary").onmouseout = undraw

	</script>
	</html>