[Pkg-javascript-commits] [d3-tip.js] 59/277: handle circle elements

Thu Dec 8 06:57:16 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 eb204663fdb34c778fc87cd14166c6ad21ec7234
Author: Justin Palmer <justin at github.com>
Date:   Fri Apr 5 12:38:15 2013 -0700

    handle circle elements
---
 examples/circles.html | 72 +++++++++++++++++++++------------------------------
 src/d3.tip.js         | 17 +++++++-----
 2 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/examples/circles.html b/examples/circles.html
index 96b87d6..598b9a7 100644
--- a/examples/circles.html
+++ b/examples/circles.html
@@ -7,6 +7,10 @@
   <script type="text/javascript" src="../components/d3/d3.js"></script>
   <script type="text/javascript" src="../src/d3.tip.js"></script>
   <style type="text/css">
+  body {
+    padding: 40px;
+  }
+
   .d3-tip {
     fill: #c00;
     font-weight: bold;
@@ -19,6 +23,13 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   }
 
+  circle {
+    fill: #ccc;
+    fill-opacity: 0.8;
+    stroke: #bbb;
+    stroke-width: 1px;
+  }
+
   .rule {
     stroke-width: 1px;
     stroke: #c00;
@@ -28,61 +39,38 @@
 </head>
 <body>
   <script type="text/javascript">
-    var w = 500,
-        h = 500,
+    var data = [],
+      random = d3.random.normal(10),
+      random2 = d3.random.irwinHall(1)
+    for(var i = 0; i < 100; i++) data.push(random(i))
+
+    var tip = d3.svg.tip()
+      .attr('class', 'd3-tip')
+      .text(function(d) { return d })
+
+    var w = 1000,
+        h = 1000,
         r = 10,
         linex, liney,
-        orientations = ['top', 'bottom', 'left', 'right'],
-        data = [1220, 2230, 3002, 4012],
         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]),
-        tip = d3.svg.tip()
-          .orient('left')
-          .padding(10)
-          .text(function(d) { return d; })
-          .attr('class', 'd3-tip')
 
     vis = d3.select(document.body)
       .append('svg')
-      .attr('width', 500)
-      .attr('height', 500)
+      .attr('width', w)
+      .attr('height', h)
+    .append('g')
+      .attr('transform', 'translate(20, 20)')
+    .call(tip)
 
     vis.selectAll('circle')
       .data(data)
     .enter().append('circle')
-      .attr('r', r)
+      .attr('r', function(d, i) { return random2(i) * 10 })
       .attr('cx', function(d, i) { return x(i) })
       .attr('cy', y)
-      .on('mouseover', function(d, i) {
-        tip.orient(orientations[i]).apply(this, arguments)
-
-        var bbox = this.getBBox(),
-            x = bbox.x + (bbox.width / 2),
-            y = bbox.y + bbox.height;
-
-        linex.transition()
-          .attr('x1', x)
-          .attr('x2', x)
-
-        liney.transition()
-          .attr('y1', y)
-          .attr('y2',y)
-
-      })
-
-    linex = vis.append('line')
-      .attr("x1", 0)
-      .attr("y1", 0)
-      .attr("x2", 0)
-      .attr("y2", h)
-      .attr('class', 'rule')
-
-    liney = vis.append('line')
-      .attr("x1", 0)
-      .attr("y1", 0)
-      .attr("x2", w)
-      .attr("y2", 0)
-      .attr('class', 'rule')
+      .on('mouseover', tip.show)
+      .on('mouseout', tip.hide)
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/d3.tip.js b/src/d3.tip.js
index dea1783..da0c328 100644
--- a/src/d3.tip.js
+++ b/src/d3.tip.js
@@ -110,17 +110,22 @@ d3.svg.tip = function() {
 
   function get_screen_bbox() {
     var target = d3.event.target,
-        bbox   = {},
+        bbox   = {}, x, y,
         matrix = target.getScreenCTM()
 
-    point.x = target.x.animVal.value + document.body.scrollLeft
-    point.y = target.y.animVal.value + document.body.scrollTop
+    x = target.x ? target.x : target.cx
+    y = target.y ? target.y : target.cy
+    width = target.width ? target.width : target.r
+    height = target.height ? target.height : target.r
+
+    point.x = x.animVal.value + document.body.scrollLeft
+    point.y = y.animVal.value + document.body.scrollTop
     bbox.nw = point.matrixTransform(matrix)
-    point.x += target.width.animVal.value
+    point.x += width.animVal.value
     bbox.ne = point.matrixTransform(matrix)
-    point.y += target.height.animVal.value
+    point.y += height.animVal.value
     bbox.se = point.matrixTransform(matrix)
-    point.x -= target.width.animVal.value
+    point.x -= width.animVal.value
     bbox.sw = point.matrixTransform(matrix)
 
     return bbox

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

