VivaGraphJS with link labels
Demo of VivaGraphJS https://github.com/anvaka/VivaGraphJS with link labels
HTML
<script src="https://rawgithub.com/anvaka/VivaGraphJS/master/dist/vivagraph.js"></script>
CSS
html,
body,
svg {
width: 100%;
height: 100%;
}
JavaScript
var graph = Viva.Graph.graph();
var graphics = Viva.Graph.View.svgGraphics(),
nodeSize = 24;
var renderer = Viva.Graph.View.renderer(graph, {
graphics: graphics
});
renderer.run();
graphics.node(function(node) {
return Viva.Graph.svg('image')
.attr('width', nodeSize)
.attr('height', nodeSize)
.link('https://secure.gravatar.com/avatar/' + node.data);
}).placeNode(function(nodeUI, pos) {
nodeUI.attr('x', pos.x - nodeSize / 2).attr('y', pos.y - nodeSize / 2);
});
var createMarker = function(id) {
return Viva.Graph.svg('marker')
.attr('id', id)
.attr('viewBox', "0 0 10 10")
.attr('refX', "10")
.attr('refY', "5")
.attr('markerUnits', "strokeWidth")
.attr('markerWidth', "10")
.attr('markerHeight', "5")
.attr('orient', "auto");
},
marker = createMarker('Triangle');
marker.append('path').attr('d', 'M 0 0 L 10 5 L 0 10 z');
var defs = graphics.getSvgRoot().append('defs');
defs.append(marker);
var geom = Viva.Graph.geom();
graphics.link(function(link) {
var label = Viva.Graph.svg('text').attr('id', 'label_' + link.data.id).text(link.data.id);
graphics.getSvgRoot().childNodes[0].append(label);
return Viva.Graph.svg('path')
.attr('stroke', 'gray')
.attr('marker-end', 'url(#Triangle)')
.attr('id', link.data.id);
}).placeLink(function(linkUI, fromPos, toPos) {
var toNodeSize = nodeSize,
fromNodeSize = nodeSize;
var from = geom.intersectRect(
fromPos.x - fromNodeSize / 2, // left
fromPos.y - fromNodeSize / 2, // top
fromPos.x + fromNodeSize / 2, // right
fromPos.y + fromNodeSize / 2, // bottom
fromPos.x, fromPos.y, toPos.x, toPos.y) ||
fromPos;
var to = geom.intersectRect(
toPos.x - toNodeSize / 2, // left
toPos.y - toNodeSize / 2, // top
toPos.x + toNodeSize / 2, // right
toPos.y + toNodeSize / 2, // bottom
// segment:
toPos.x, toPos.y, fromPos.x, fromPos.y) ||
toPos;
var data = 'M' +...