[Pkg-javascript-commits] [d3-tip.js] 25/277: reorient when tip exceeds bounds in any direction

bhuvan krishna bhuvan-guest at moszumanska.debian.org
Thu Dec 8 06:57:13 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 c09bf85090175a6e999bf0e39034657b60946047
Author: Justin Palmer <justin at labratrevenge.com>
Date:   Mon Jan 9 09:59:46 2012 -0800

    reorient when tip exceeds bounds in any direction
---
 README.md             |  4 ++--
 examples/bars.html    |  2 +-
 examples/circles.html |  2 +-
 examples/line.html    |  6 +++---
 src/d3.tip.js         | 35 +++++++++++++++++++++++++++++++++--
 5 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 760ea85..ab0c684 100644
--- a/README.md
+++ b/README.md
@@ -20,8 +20,8 @@ vis.selectAll('rect')
 
 ## TODO
 * ~~Left orientation~~
-* Right orientation
+* ~~Right orientation~~
 * Auto orientation
-* Reorient when tip exceeds document bounds
+* ~~Reorient when tip exceeds document bounds~~
 * svg content in tip
 * docs
\ No newline at end of file
diff --git a/examples/bars.html b/examples/bars.html
index 135d5e1..92425c5 100644
--- a/examples/bars.html
+++ b/examples/bars.html
@@ -35,7 +35,7 @@
         x  = d3.scale.ordinal().domain(d3.range(data.length)).rangeRoundBands([0, w], 0.1),
         y  = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]),
         tip = d3.svg.tip()
-          .orient('right')
+          .orient('left')
           .padding(5)
           .text(function(d) { return d; })
           .attr('class', 'd3-tip')
diff --git a/examples/circles.html b/examples/circles.html
index c348660..91637b4 100644
--- a/examples/circles.html
+++ b/examples/circles.html
@@ -36,7 +36,7 @@
         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('right')
+          .orient('left')
           .padding(10)
           .text(function(d) { return d; })
           .attr('class', 'd3-tip')
diff --git a/examples/line.html b/examples/line.html
index c61f9bb..2fd52ca 100644
--- a/examples/line.html
+++ b/examples/line.html
@@ -38,16 +38,16 @@
   </head>
   <body>
   <script type="text/javascript">
-  var data  = [[3,7,9,1,4,4,8,2,5], [5,2,3,4,9,6,4,6,8]],
+  var data  = [[300,700,900,100,400,400,800,200,500], [500,200,300,400,900,600,400,600,800]],
       pl = 20, pt = 20, pr = 20, pb = 20,
       w     = 800 - pl - pr,
       h     = 300 - pt - pb,
       max   = d3.max(data, function(d) { return d3.max(d) }),
       linex, liney,
       tip = d3.svg.tip()
-        .orient('bottom')
+        .orient('top')
         .padding(4)
-        .offset([20, -20])
+        .offset([20, 20])
         .text(function(d) { return d; })
         .attr('class', 'd3-tip');
 
diff --git a/src/d3.tip.js b/src/d3.tip.js
index 44e1b21..fa9a5f4 100644
--- a/src/d3.tip.js
+++ b/src/d3.tip.js
@@ -14,7 +14,7 @@ d3.svg.tip = function() {
         tipText   = text.apply(this, arguments),
         container = d3.select(node),
         tag = this.tagName.toLowerCase(),
-        loc, stem, backingRect, containerRect, stemRect, d3_orient_types;
+        loc, stem, stem_gen, backingRect, containerRect, stemRect, d3_orient_types;
     
     // Elements and Bounds
     var doc        = d3.select(this.ownerSVGElement),
@@ -46,7 +46,8 @@ d3.svg.tip = function() {
 
     // TODO: stem seems to report the wrong height, so it's never completely flush
     // against the backing rect.
-    stem = container.append('path').attr('d', d3_svg_stem())
+    stem_gen = d3.svg.symbol().type('triangle-down').size(stemSize)
+    stem = container.append('path').attr('d', stem_gen())
     stemRect = stem.node().getBBox()
 
     d3_orient_types = {
@@ -60,6 +61,11 @@ d3.svg.tip = function() {
       },
 
       bottom: function() {
+        stem.remove()
+        stem_gen = d3.svg.symbol().type('triangle-up').size(stemSize)
+        stem = container.append('path').attr('d', stem_gen())
+        
+        stemRect = stem.node().getBBox()
         stem.attr('transform', 'translate(' + (backingRect.width / 2) + ',' + -(stemRect.height / 2) + ')');
         
         containerRect = container.node().getBBox()
@@ -107,6 +113,31 @@ d3.svg.tip = function() {
     }
 
     loc = d3_orient_types[orient]()
+
+    // Tip clipped at right boundry
+    if(loc.x + containerRect.width > docRect.width) {
+      loc = d3_orient_types['left']()
+    }
+
+    // Tip clipped at left boundry
+    if(loc.x < 0 && orient == 'left') {
+      loc = d3_orient_types['right']()
+    }
+
+    // Tip positioned left or right and clipped at the top or bottom
+    if(orient == 'left' || orient == 'right') {
+      if(loc.y < 0) loc.y = 0
+      if(loc.y > docRect.height) loc.y = docRect.height
+    }
+
+    // Tip positioned at the top and overlaps the top boundry.
+    // We need to "flip" the offset here so the offset runs in the 
+    // opposite direction.
+    if(loc.y - containerRect.height < 0 && orient == 'top') {
+      loc = d3_orient_types['bottom']()
+      loc.y += (tipOffset[1] * 2);
+    }
+
     container.attr('transform', 'translate(' + loc.x + ',' + loc.y + ')')
   }
 

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



More information about the Pkg-javascript-commits mailing list