[Pkg-javascript-commits] [d3-tip.js] 96/277: example of two tips on a page and "stickyness"

Thu Dec 8 06:57:20 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 f09fd3e962c648abd22c3d06a76b09fda0cb88c9
Author: Justin Palmer <justin at github.com>
Date:   Sun Apr 21 12:42:49 2013 -0700

    example of two tips on a page and "stickyness"
---
 examples/circles.html | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/examples/circles.html b/examples/circles.html
index 562c10f..5c6b320 100644
--- a/examples/circles.html
+++ b/examples/circles.html
@@ -41,6 +41,10 @@
     stroke: #999;
   }
 
+  circle.clickable:hover {
+    cursor: pointer;
+  }
+
   .rule {
     stroke-width: 1px;
     stroke: #c00;
@@ -51,7 +55,7 @@
 <body>
   <script type="text/javascript">
     var data = [],
-      random = d3.random.normal(10),
+      random = d3.random.normal(5),
       random2 = d3.random.irwinHall(1)
     for(var i = 0; i < 100; i++) data.push(random(i))
 
@@ -61,14 +65,20 @@
       .direction('e')
       .offset([0, 3])
 
+    var tip2 = d3.tip()
+      .attr('class', 'd3-tip')
+      .text(function(d) { return d.toFixed(2) })
+      .direction('n')
+      .offset([-3, 0])
+
     var w = 1000,
-        h = 1000,
+        h = 500,
         r = 10,
         linex, liney,
         x = d3.scale.linear().domain([0, data.length - 1]).range([r, w - r]),
-        y = d3.scale.linear().domain([0, d3.max(data)]).range([h,  r]),
+        y = d3.scale.linear().domain([0, d3.max(data)]).range([h,  0])
 
-    vis = d3.select(document.body)
+    var vis = d3.select(document.body)
       .append('svg')
       .attr('width', w)
       .attr('height', h)
@@ -84,6 +94,26 @@
       .attr('cy', y)
       .on('mouseover', tip.show)
       .on('mouseout', tip.hide)
+
+    var vis2 = d3.select(document.body)
+      .append('svg')
+      .attr('width', w)
+      .attr('height', h)
+    .append('g')
+      .attr('transform', 'translate(20, 20)')
+      .call(tip2)
+
+    vis2.selectAll('circle')
+      .data(data)
+    .enter().append('circle')
+      .attr('class', 'clickable')
+      .attr('r', function(d, i) { return random2(i) * 10 })
+      .attr('cx', function(d, i) { return x(i) })
+      .attr('cy', y)
+      .on('click', function(d) {
+        tip2.hide(d).show(d)
+      })
+
   </script>
 </body>
 </html>
\ No newline at end of file

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

