diff options
| author | Adam Spiers <git@adamspiers.org> | 2015-01-07 15:58:19 +0000 |
|---|---|---|
| committer | Adam Spiers <git@adamspiers.org> | 2015-01-08 01:27:45 +0000 |
| commit | a8e8f3a618ac01a7fbf2993702847f6379fb5778 (patch) | |
| tree | aa782362fc99dcda0bc801465eb2935e469aee29 | |
| parent | e980d332e152fce145527e0f1c27d2d560eb0332 (diff) | |
| download | git-deps-a8e8f3a618ac01a7fbf2993702847f6379fb5778.tar.gz | |
add a basic commit tip
| -rw-r--r-- | html/git-deps-tips.css | 55 | ||||
| -rw-r--r-- | html/git-deps.html | 2 | ||||
| -rw-r--r-- | html/js/git-deps-graph.js | 19 |
3 files changed, 73 insertions, 3 deletions
diff --git a/html/git-deps-tips.css b/html/git-deps-tips.css new file mode 100644 index 0000000..fc9a4ec --- /dev/null +++ b/html/git-deps-tips.css @@ -0,0 +1,55 @@ +.d3-tip { + line-height: 1; + font-weight: bold; + padding: 12px; + background: rgba(0, 0, 0, 0.8); + color: #fff; + border-radius: 2px; + pointer-events: none; +} + +/* Creates a small triangle extender for the tooltip */ +.d3-tip:after { + box-sizing: border-box; + display: inline; + font-size: 10px; + width: 100%; + line-height: 1; + color: rgba(0, 0, 0, 0.8); + position: absolute; + pointer-events: none; +} + +/* Northward tooltips */ +.d3-tip.n:after { + content: "\25BC"; + margin: -1px 0 0 0; + top: 100%; + left: 0; + text-align: center; +} + +/* Eastward tooltips */ +.d3-tip.e:after { + content: "\25C0"; + margin: -4px 0 0 0; + top: 50%; + left: -8px; +} + +/* Southward tooltips */ +.d3-tip.s:after { + content: "\25B2"; + margin: 0 0 1px 0; + top: -8px; + left: 0; + text-align: center; +} + +/* Westward tooltips */ +.d3-tip.w:after { + content: "\25B6"; + margin: -4px 0 0 -1px; + top: 50%; + left: 100%; +} diff --git a/html/git-deps.html b/html/git-deps.html index 54bd915..a785e22 100644 --- a/html/git-deps.html +++ b/html/git-deps.html @@ -7,10 +7,12 @@ <script language="javascript" type="text/javascript" src="js/jquery-2.1.3.min.js"></script> <script language="javascript" type="text/javascript" src="js/d3.js"></script> + <script language="javascript" type="text/javascript" src="js/d3-tip-0.6.6.js"></script> <script language="javascript" type="text/javascript" src="js/cola.v3.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" /> + <link rel="stylesheet" type="text/css" href="git-deps-tips.css" /> </head> <body> diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js index ae7477f..94398c3 100644 --- a/html/js/git-deps-graph.js +++ b/html/js/git-deps-graph.js @@ -66,6 +66,10 @@ function draw_graph () { .attr("class", "node") .call(d3cola.drag); + // Initialize tooltip + var tip = d3.tip().attr('class', 'd3-tip').html(tip_html); + fg.call(tip); + var rect = node.append("rect") .attr("rx", 5).attr("ry", 5); @@ -86,11 +90,16 @@ function draw_graph () { // .text(function (d) { return d.name; }); rect.attr('width', function (d, i) { return d.rect_width; }) - .attr('height', function (d, i) { return d.rect_height; }); + .attr('height', function (d, i) { return d.rect_height; }) + .on('mouseover', tip.show) + .on('mouseout', tip.hide); // Centre label - label.attr("x", function (d) { return d.rect_width / 2; }) - .attr("y", function (d) { return d.rect_height / 2; }); + label + .attr("x", function (d) { return d.rect_width / 2; }) + .attr("y", function (d) { return d.rect_height / 2; }) + .on('mouseover', tip.show) + .on('mouseout', tip.hide); d3cola.start(10,20,20); @@ -146,6 +155,10 @@ function draw_graph () { }); } +function tip_html (d) { + return d.describe || d.sha; +} + var lineFunction = d3.svg.line() .x(function (d) { return d.x; }) .y(function (d) { return d.y; }) |