[Pkg-javascript-commits] [d3-tip.js] 12/277: implement offset for charts surrounded by padding/offsets
bhuvan krishna
bhuvan-guest at moszumanska.debian.org
Thu Dec 8 06:57:11 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 16321bbdccf5a01a3895b2eb61ef3042f52d378a
Author: Justin Palmer <justin at labratrevenge.com>
Date: Sun Jan 8 15:12:23 2012 -0800
implement offset for charts surrounded by padding/offsets
---
examples/circles.html | 8 ++--
examples/line.html | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++
src/d3.tip.js | 8 ++--
3 files changed, 137 insertions(+), 9 deletions(-)
diff --git a/examples/circles.html b/examples/circles.html
index b6db973..8d2af8e 100644
--- a/examples/circles.html
+++ b/examples/circles.html
@@ -38,10 +38,8 @@
tip = d3.svg.tip()
.orient('top')
.padding(10)
- .text(function(d, i, t) {
- return "value: " + d;
- })
-
+ .text(function(d) { return d; })
+ .attr('class', 'd3-tip')
vis = d3.select(document.body)
.append('svg')
@@ -54,7 +52,7 @@
.attr('r', r)
.attr('cx', function(d, i) { return x(i) })
.attr('cy', y)
- // .on('mouseover', tip)
+ .on('mouseover', tip)
.on('click', function() {
var bbox = this.getBBox(),
x = bbox.x + (bbox.width / 2),
diff --git a/examples/line.html b/examples/line.html
new file mode 100644
index 0000000..ff44be6
--- /dev/null
+++ b/examples/line.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Crimean War</title>
+ <script type="text/javascript" src="../vendor/d3.js"></script>
+ <script type="text/javascript" src="../vendor/d3.layout.js"></script>
+ <script type="text/javascript" src="../src/d3.tip.js"></script>
+ <style type="text/css">
+ .d3-tip {
+ fill: #c00;
+ font-weight: bold;
+ }
+
+ .d3-tip text {
+ fill: #fff;
+ font-size: 12px;
+ stroke: none;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ }
+
+ .rule {
+ stroke-width: 1px;
+ stroke: #c00;
+ shape-rendering: crispedges;
+ }
+
+ path {
+ fill: none;
+ stroke-width: 2px;
+ }
+
+ circle {
+ fill: #fff;
+ stroke: #c00;
+ stroke-width: 2px;
+ }
+ </style>
+ </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]],
+ 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('top')
+ .padding(10)
+ .offset([20, 20])
+ .text(function(d) { return d; })
+ .attr('class', 'd3-tip');
+
+ // Scales
+ var x = d3.scale.linear().domain([0, data[0].length - 1]).range([0, w])
+ y = d3.scale.linear().domain([0, max]).range([h, 0]);
+
+ // Base vis layer
+ var vis = d3.select(document.body)
+ .append('svg')
+ .attr('width', w + (pl + pr))
+ .attr('height', h + pt + pb)
+ .attr('class', 'viz')
+ .append('g')
+ .attr('transform', "translate(" + pl + "," + pt + ")")
+
+ // add path layers to their repesctive group
+ var paths = vis.selectAll('path.line')
+ .data(data)
+ .enter().append("g")
+
+ paths.append('path')
+ .attr("d", d3.svg.line().x(function(d,i) { return x(i) }).y(y).interpolate('cardinal'))
+ .style('stroke', function(d, i) { return ['#2fa5c7', '#d95ba6'][i] })
+
+ //Add point circles
+ paths.selectAll('.point')
+ .data(function(d) { return d })
+ .enter().append("circle")
+ .attr("class", 'point')
+ .attr("r", 4)
+ .attr("cx", function(d, i) { return x(i) })
+ .attr("cy", function(d) { return y(d) })
+ .on('click', function() {
+ var rect = this.getBoundingClientRect(),
+ bbox = this.getBBox(),
+ x = bbox.x + (bbox.width / 2),
+ y = bbox.y;
+
+ linex.transition()
+ .attr('x1', x)
+ .attr('x2', x)
+
+ liney.transition()
+ .attr('y1', y)
+ .attr('y2',y)
+ })
+ .on('mouseover', function() {
+ var rect = this.getBoundingClientRect(),
+ bbox = this.getBBox(),
+ x = bbox.x + (bbox.width / 2),
+ y = bbox.y;
+
+ linex.transition()
+ .attr('x1', x)
+ .attr('x2', x)
+
+ liney.transition()
+ .attr('y1', y)
+ .attr('y2',y)
+
+ tip.apply(this, arguments)
+ })
+
+ 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')
+ </script>
+ </body>
+</html>
diff --git a/src/d3.tip.js b/src/d3.tip.js
index 33b7efa..d31d33e 100644
--- a/src/d3.tip.js
+++ b/src/d3.tip.js
@@ -28,17 +28,17 @@ d3.svg.tip = function() {
// The value to show in the tooltip
var val = container.append('text').text(tipText).attr('text-anchor', 'middle').attr('alignment-baseline', 'middle'),
- valRect = val.node().getBoundingClientRect();
+ valRect = val.node().getBBox();
backing.attr('width', valRect.width).attr('height', valRect.height)
val.attr('dx', valRect.width / 2).attr('dy', valRect.height / 2)
- var containerRect = container.node().getBBox();
+ var backingRect = backing.node().getBBox();
switch(orient) {
case 'top':
- x = targetRect.x + (targetRect.width / 2) - (containerRect.width / 2);
- y = targetRect.y;
+ x = targetRect.x + (targetRect.width / 2) - (backingRect.width / 2) + tipOffset[0];
+ y = targetRect.y - backingRect.height + tipOffset[1];
break;
}
--
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