diff options
| author | Adam Spiers <git@adamspiers.org> | 2015-01-06 13:29:18 +0000 |
|---|---|---|
| committer | Adam Spiers <git@adamspiers.org> | 2015-01-06 13:29:18 +0000 |
| commit | c44f3ecb976571c6be42d3877418b608e8f1c02a (patch) | |
| tree | da585fbf8db244f7172e6a6fb2acd48b26ef5f1c /html | |
| parent | 6865a899eaa7acb92a85982f4b9c710c29f0cceb (diff) | |
| download | git-deps-c44f3ecb976571c6be42d3877418b608e8f1c02a.tar.gz | |
render graph from test.json
Diffstat (limited to 'html')
| -rw-r--r-- | html/git-deps.css | 12 | ||||
| -rw-r--r-- | html/git-deps.html | 21 | ||||
| -rw-r--r-- | html/js/git-deps-graph.js | 100 |
3 files changed, 133 insertions, 0 deletions
diff --git a/html/git-deps.css b/html/git-deps.css new file mode 100644 index 0000000..307c70c --- /dev/null +++ b/html/git-deps.css @@ -0,0 +1,12 @@ +.node { + stroke: #fff; + stroke-width: 1.5px; +} + +.link { + fill: none; + stroke: #000; + stroke-width: 1.5px; + opacity: 0.4; + marker-end: url(#end-arrow); +} diff --git a/html/git-deps.html b/html/git-deps.html new file mode 100644 index 0000000..1051e06 --- /dev/null +++ b/html/git-deps.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> + +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>git commit dependency graph</title> + + <script language="javascript" type="text/javascript" src="js/jquery-2.1.3.min.js"></script> + <script language="javascript" type="text/javascript" src="js/d3.min.js"></script> + <script language="javascript" type="text/javascript" src="js/cola.v3.min.js"></script> + <script language="javascript" type="text/javascript" src="js/git-deps-graph.js"></script> + + <link rel="stylesheet" type="text/css" href="git-deps.css" /> +</head> + +<body> + <h1>git commit dependency graph</h1> + + <p>Some text probably goes here.</p> +</body> +</html> diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js new file mode 100644 index 0000000..5deee7d --- /dev/null +++ b/html/js/git-deps-graph.js @@ -0,0 +1,100 @@ +var width = 960, + height = 500; + +var color = d3.scale.category20(); + +var d3cola = cola.d3adaptor() + .avoidOverlaps(true) + .size([width, height]); + +jQuery(function () { + draw_graph(); +}); + +function draw_graph () { + var svg = d3.select("body").append("svg") + .attr("width", width) + .attr("height", height); + + d3.json("test.json", function (error, graph) { + var nodeRadius = 5; + + graph.nodes.forEach(function (v) { v.height = v.width = 2 * nodeRadius; }); + + d3cola + .nodes(graph.nodes) + .links(graph.links) + .flowLayout("y", 30) + .symmetricDiffLinkLengths(6) + .start(10,20,20); + + // define arrow markers for graph links + svg.append('svg:defs').append('svg:marker') + .attr('id', 'end-arrow') + .attr('viewBox', '0 -5 10 10') + .attr('refX', 6) + .attr('markerWidth', 3) + .attr('markerHeight', 3) + .attr('orient', 'auto') + .append('svg:path') + .attr('d', 'M0,-5L10,0L0,5') + .attr('fill', '#000'); + + var path = svg.selectAll(".link") + .data(graph.links) + .enter().append('svg:path') + .attr('class', 'link'); + + var node = svg.selectAll(".node") + .data(graph.nodes) + .enter().append("circle") + .attr("class", "node") + .attr("r", nodeRadius) + .style("fill", function (d) { return color(d.group); }) + .call(d3cola.drag); + + node.append("title") + .text(function (d) { return d.name; }); + + d3cola.on("tick", function () { + path.each(function (d) { + if (isIE()) this.parentNode.insertBefore(this, this); + }); + // draw directed edges with proper padding from node centers + path.attr('d', function (d) { + var deltaX = d.target.x - d.source.x, + deltaY = d.target.y - d.source.y, + dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY), + normX = deltaX / dist, + normY = deltaY / dist, + sourcePadding = nodeRadius, + targetPadding = nodeRadius + 2, + sourceX = d.source.x + (sourcePadding * normX), + sourceY = d.source.y + (sourcePadding * normY), + targetX = d.target.x - (targetPadding * normX), + targetY = d.target.y - (targetPadding * normY); + return 'M' + sourceX + ',' + sourceY + 'L' + targetX + ',' + targetY; + }); + + node.attr("cx", function (d) { return d.x; }) + .attr("cy", function (d) { return d.y; }); + }); + // turn on overlap avoidance after first convergence + //cola.on("end", function () { + // if (!cola.avoidOverlaps()) { + // graph.nodes.forEach(function (v) { + // v.width = v.height = 10; + // }); + // cola.avoidOverlaps(true); + // cola.start(); + // } + //}); + }); +} + +function isIE() { + return (navigator.appName == 'Microsoft Internet Explorer') || + ((navigator.appName == 'Netscape') && + (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) + != null)); +} |