[Pkg-javascript-commits] [d3-tip.js] 183/277: updated arrow styles and added a working example

Thu Dec 8 06:57:28 UTC 2016

This is an automated email from the git hooks/post-receive script.

bhuvan-guest pushed a commit to branch master
in repository d3-tip.js.

commit 2bc12ef635612af4f113b1bc4715a29a570e7097
Author: Dean Malmgren <dean.malmgren at datascopeanalytics.com>
Date:   Fri Sep 20 09:54:52 2013 -0500

    updated arrow styles and added a working example
---
 docs/styling-and-modifying-tooltips.md |  16 ++--
 examples/arrow-styles.html             | 150 +++++++++++++++++++++++++++++++++
 2 files changed, 160 insertions(+), 6 deletions(-)

diff --git a/docs/styling-and-modifying-tooltips.md b/docs/styling-and-modifying-tooltips.md
index c68b262..74fdb1c 100644
--- a/docs/styling-and-modifying-tooltips.md
+++ b/docs/styling-and-modifying-tooltips.md
@@ -43,10 +43,10 @@ A proxy to d3's [selection.attr](https://github.com/mbostock/d3/wiki/Selections#
 
 /* Eastward tooltips */
 .d3-tip.e:after {
-  content: "\25B6";
-  margin: -4px 0 0 -1px;
+  content: "\25C0";
+  margin: -4px 0 0 0;
   top: 50%;
-  left: 100%;
+  left: -8px;
 }
 
 /* Southward tooltips */
@@ -60,9 +60,13 @@ A proxy to d3's [selection.attr](https://github.com/mbostock/d3/wiki/Selections#
 
 /* Westward tooltips */
 .d3-tip.w:after {
-  content: "\25C0";
-  margin: -4px 0 0 0;
+  content: "\25B6";
+  margin: -4px 0 0 -1px;
   top: 50%;
-  left: -8px;
+  left: 100%;
 }
 ```
+
+See these stylings in action in either
+[a live example](http://bl.ocks.org/deanmalmgren/6638585) or the
+[examples directory](../examples/arrow-styles.html).
diff --git a/examples/arrow-styles.html b/examples/arrow-styles.html
new file mode 100644
index 0000000..d38ad81
--- /dev/null
+++ b/examples/arrow-styles.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>d3.tip.js - Tooltips for D3</title>
+  <meta charset="utf-8" />
+  <title>Example styles</title>
+  <script type="text/javascript" src="../bower_components/d3/d3.js"></script>
+  <script type="text/javascript" src="../src/d3.tip.js"></script>
+  <style type="text/css">
+  body {
+    padding: 40px;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 12px;
+    width: 600px;
+  }
+
+  svg.n, svg.s {
+    margin-left: 200px;
+    margin-right: 200px;  
+  }
+  svg.e {
+    margin-left: 200px;
+  }
+
+  .d3-tip {
+    line-height: 1;
+    font-weight: bold;
+    padding: 12px;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    border-radius: 2px;
+  }
+
+  /* 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;
+  }
+
+  /* Nrthward 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%;
+  }
+
+  circle {
+    fill: #ccc;
+    fill-opacity: 0.6;
+    stroke: #bbb;
+    stroke-width: 1px;
+  }
+
+  circle:hover {
+    fill: #bbb;
+    stroke: #999;
+  }
+
+  text {
+    text-anchor: middle;
+  }
+  </style>
+</head>
+<body>
+  <script type="text/javascript">
+    var data = [],
+      random = d3.random.normal(5),
+      random2 = d3.random.irwinHall(1)
+    for(var i = 0; i < 25; i++) data.push(random(i))
+
+    var w = 200,
+        h = 200,
+        b = 20,
+        r = 10,
+        x = d3.scale.linear().domain([0, data.length - 1]).range([r, w - r]),
+        y = d3.scale.linear().domain([0, d3.max(data)]).range([h,  0])
+
+    var directions = ['n', 'w', 'e', 's'];
+    directions.forEach(function (direction) {
+      var tip = d3.tip()
+        .attr('class', 'd3-tip')
+        .html(function(d) { return d.toFixed(2) })
+        .direction(direction)
+        .offset(function () {
+          if(direction=='n') { return [-10,0] }
+          else if(direction=='s') { return [10,0] }
+          else if(direction=='e') { return [0,10] }
+          else if(direction=='w') { return [0,-10] }
+        })
+
+      var vis = d3.select(document.body)
+        .append('svg')
+        .attr('class', direction)
+        .attr('width', w)
+        .attr('height', h)
+      .append('g')
+        .attr('transform', 'translate('+b+','+b+')')
+      .call(tip)
+
+      vis.append('text')
+        .attr('class', 'direction')
+        .attr('x', w/2)
+        .attr('y', -b)
+        .attr('dy', '1em')
+        .text('direction: ' + direction)
+
+      vis.selectAll('circle')
+        .data(data)
+      .enter().append('circle')
+        .attr('r', function(d, i) { return random2(i) * 10 })
+        .attr('cx', function(d, i) { return x(i) })
+        .attr('cy', y)
+        .on('mouseover', tip.show)
+        .on('mouseout', tip.hide)
+    })
+  </script>
+</body>
+</html>

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/d3-tip.js.git

