Arrow connector helper

It is conceivable that one might want a setup whereby someone can arrange a Web Page such that certain things point to certain other things without writing any javascript or a ton of custom css or whatever. This is a solution.

1. HTML

In the data-arrow-target attribute of an HTML element, provide a CSS selector. If the selector matches more than one element, lines will be drawn from the element to all the matching elements.

E.g.: <div id="one" data-arrow-target="#two"></div>

2. JavaScript

arrowConnector() returns a render function.


// Gets your renderer
var connect = arrowConnector();

// Renders for the first time
connect();

// Render on resize
d3.select(window).on("resize", connect);

3. CSS

Arrows get a class .arrow-connector. Do as you will with it.

The end.

FAQ

But there are no arrowheads! Correct. Yet!
That's a useless closure. Correct. For now!

xxxxxxxxxx
 
<html>
<head>
<style>
  .arrow-connector {
    stroke: black;
  }
  #one, #two { 
    position: absolute; 
    width: 100px;
    height: 100px;
  }
  #one {
    top: 50px;
    left: 50px;
    background: #f0f;
  }
  #two {
    top: 250px;
    left: 500px;
    background: #0f0;
  }
</style>
</head>
​
<body>
<div id="one" data-arrow-target="#two"></div>
<div id="two"></div>
​
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="arrowConnector.js"></script>
<script type="text/javascript">
​
var connect = arrowConnector();
connect();
d3.select(window).on("resize", connect);
​
</script>
​
</body>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js