[Pkg-javascript-commits] [d3-tip.js] 07/277: initial bar tip
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 fd091a336f92700a595df42b46672f92a6b0d263
Author: Justin Palmer <justin at labratrevenge.com>
Date: Sat Jan 7 13:29:02 2012 -0800
initial bar tip
---
examples/bars.html | 44 ++++++++++++++++++++++++++++++++++
examples/circles.html | 3 ++-
src/d3.tip.js | 66 ++++++++++++++++++++++++++++++++++++++-------------
3 files changed, 96 insertions(+), 17 deletions(-)
diff --git a/examples/bars.html b/examples/bars.html
index 2b5b8dd..fc4bf2b 100644
--- a/examples/bars.html
+++ b/examples/bars.html
@@ -3,8 +3,52 @@
<head>
<title>d3.tip.js - Tooltips for D3</title>
<meta charset="utf-8" />
+ <title>Bar Chart</title>
+ <script type="text/javascript" src="../vendor/d3.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;
+ }
+ </style>
</head>
<body>
+ <script type="text/javascript">
+ var w = 500,
+ h = 500,
+ data = [220, 230, 300, 402],
+ 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('top')
+ .padding(10)
+ .text(function(d, i, t) {
+ return "value: " + d;
+ })
+
+
+ vis = d3.select(document.body)
+ .append('svg')
+ .attr('width', 500)
+ .attr('height', 500)
+
+ vis.selectAll('rect')
+ .data(data)
+ .enter().append('rect')
+ .attr('width', function() { return x.rangeBand() })
+ .attr('height', function(d) { return h - y(d) })
+ .attr('y', function(d) { return y(d) })
+ .attr('x', function(d, i) { return x(i) })
+ .on('mouseover', tip)
+ </script>
</body>
</html>
\ No newline at end of file
diff --git a/examples/circles.html b/examples/circles.html
index ad6402f..eea1671 100644
--- a/examples/circles.html
+++ b/examples/circles.html
@@ -30,7 +30,8 @@
y = d3.scale.linear().domain([0, d3.max(data)]).range([h, r]),
tip = d3.svg.tip()
.orient('top')
- .content(function(d, i, t) {
+ .padding(10)
+ .text(function(d, i, t) {
return "value: " + d;
})
diff --git a/src/d3.tip.js b/src/d3.tip.js
index 18cbebd..110697d 100644
--- a/src/d3.tip.js
+++ b/src/d3.tip.js
@@ -1,24 +1,29 @@
d3.svg.tip = function() {
var orient = 'top',
id = 'd3-tip',
- className = 'd3-tip',
- pad = 5,
- stemSize = 60;
+ className = d3_svg_className,
+ padding = d3_svg_padding,
+ stemSize = 60,
+ offset = d3_svg_offset,
+ text = d3_svg_text;
function tip(d, i) {
- var el = d3.select(this),
+ var pad = padding.apply(this, arguments),
+ oset = offset.apply(this, arguments),
+ cnt = text.apply(this, arguments),
+ klass = className.apply(this, arguments),
+ el = d3.select(this),
doc = d3.select(this.ownerSVGElement),
group = doc.select('#' + id).empty() ? doc.append('g').attr('id', id) : doc.select('#' + id),
bounds = doc.node().getBoundingClientRect(),
symbol = d3.svg.symbol().type('triangle-down').size(stemSize);
- //el.on('mouseout', function() { group.remove() })
+ el.on('mouseout', function() { group.remove() })
- group.classed(className, true).text(' ');
+ group.classed(klass, true).text(' ');
var rect = group.append('rect').attr('transform', 'translate(0,0)').attr('rx', 3).attr('ry', 3),
stem = group.append('path').attr('d', symbol),
- cnt = content(d, i, group),
ebbox = el.node().getBBox(),
stemBounds = stem.node().getBBox();
@@ -27,14 +32,15 @@ d3.svg.tip = function() {
.text(cnt)
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'middle'),
- sbbox = str.node().getBBox();
+ sbbox = str.node().getBBox(),
+ rectw = sbbox.width + padding(d, i) * 2,
+ recth = sbbox.height + padding(d, i) * 2;
- rect.attr('width', sbbox.width + pad * 2)
- .attr('height', sbbox.height + pad * 2)
+ rect.attr('width', rectw).attr('height', recth)
var rbbox = rect.node().getBBox(),
- x = (ebbox.x - sbbox.width / 2),
- y = (ebbox.y - rbbox.height) - stemBounds.height;
+ x = (ebbox.x - sbbox.width / 2) + oset[0],
+ y = (ebbox.y - rbbox.height) - stemBounds.height + oset[1];
if(x <= 0) { x = 0 }
if(x + rbbox.width > bounds.width) { x = bounds.width - rbbox.width }
@@ -43,9 +49,25 @@ d3.svg.tip = function() {
str.attr('dx', rbbox.width / 2).attr('dy', rbbox.height / 2)
group.attr('transform', "translate(" + x + "," + y + ")")
stem.attr('transform','translate(' + rbbox.width / 2 + ',' + (rbbox.height + stemBounds.height / 2) + ')')
- }
+ }
+
}
+ function d3_svg_padding() {
+ return 5;
+ }
+
+ function d3_svg_offset() {
+ return [0, 0];
+ }
+
+ function d3_svg_text() {
+ return ' ';
+ }
+
+ function d3_svg_className() {
+ return 'd3-tip';
+ }
tip.orient = function(v) {
if (!arguments.length) return orient;
@@ -65,9 +87,21 @@ d3.svg.tip = function() {
return tip;
};
- tip.content = function(v) {
- if (!arguments.length) return content;
- content = v == null ? v: d3.functor(v);
+ tip.padding = function(v) {
+ if (!arguments.length) return padding;
+ padding = v == null ? v: d3.functor(v);
+ return tip;
+ };
+
+ tip.offset = function(v) {
+ if (!arguments.length) return offset;
+ offset = v == null ? v: d3.functor(v);
+ return tip;
+ };
+
+ tip.text = function(v) {
+ if (!arguments.length) return text;
+ text = v == null ? v: d3.functor(v);
return tip;
};
--
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