[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