skeleton.js.graphbuilder.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of crawloverview-plugin Show documentation

Generates an HTML report with a snapshot overview of what is crawled.

There is a newer version: 5.2.3

var graph = Viva.Graph.graph();

var layout = Viva.Graph.Layout.forceDirected(graph, {
	springLength : 600,
	springCoeff : 0.0005,
	dragCoeff : 0.06,
	gravity : -200.2
});

var graphics = Viva.Graph.View.svgGraphics(),
nodeSize = 200;

var graphics = Viva.Graph.View.svgGraphics();

var renderer = Viva.Graph.View.renderer(graph, {
	graphics : graphics,
	layout : layout,
	container : document.getElementById('container-graph')
});

renderer.run();

graphics.node(function(node) {
	// This time it's a group of elements: http://www.w3.org/TR/SVG/struct.html#Groups
	var ui = Viva.Graph.svg('g');
	// Create SVG text element with user id as content
	var svgText = Viva.Graph.svg('text').attr('y', '-4px').text(node.id);
	var img = Viva.Graph.svg('image')
		.attr('width', nodeSize)
		.attr('height', nodeSize)
		.link(node.data.img); 
	$(img).dblclick(function() { window.open(node.data.url, '_blank');});
	ui.append(svgText);
	ui.append(img);	
	stroke = Viva.Graph.svg('rect')
		.attr("style", "fill:none;stroke-width:1;stroke:black;")
		.attr('width', nodeSize+1)
		.attr('height', nodeSize+1)
		ui.append(stroke);
	return ui;
}).placeNode(function(nodeUI, pos) {
	nodeUI.attr('transform', 
	'translate(' + 
	(pos.x - nodeSize/2) + ',' + (pos.y - nodeSize/2) + 
	')');
}); 


// To render an arrow we have to address two problems:
//  1. Links should start/stop at node's bounding box, not at the node center. 
//  2. Render an arrow shape at the end of the link.

// Rendering arrow shape is achieved by using SVG markers, part of the SVG  
// standard: http://www.w3.org/TR/SVG/painting.html#Markers
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').attr('stroke', 'grey');

// Marker should be defined only once in  child element of root