All examples By author By category About

tophtucker

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