[Pkg-javascript-commits] [d3-tip.js] 11/277: beginning of rewrite
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 92a7385a245b9960889f5dc8bc2f346989414882
Author: Justin Palmer <justin at labratrevenge.com>
Date: Sun Jan 8 11:39:43 2012 -0800
beginning of rewrite
---
examples/bars.html | 42 ++++++++++++--
examples/circles.html | 35 +++++++++++-
src/d3.tip.js | 155 ++++++++++++++++++++++++++++++--------------------
3 files changed, 164 insertions(+), 68 deletions(-)
diff --git a/examples/bars.html b/examples/bars.html
index 3a08a21..71840d8 100644
--- a/examples/bars.html
+++ b/examples/bars.html
@@ -18,22 +18,27 @@
stroke: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
+
+ .rule {
+ stroke-width: 1px;
+ stroke: #c00;
+ shape-rendering: crispedges;
+ }
</style>
</head>
<body>
<script type="text/javascript">
var w = 500,
h = 500,
- data = [220, 230, 300, 402],
+ linex, liney,
+ data = [500, 100],
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)
- .offset(function() { return [0, -10]})
- .text(function(d, i, t) {
- return "value: " + d;
- })
+ .text(function(d) { return d; })
+ .attr('class', 'd3-tip')
vis = d3.select(document.body)
@@ -49,7 +54,34 @@
.attr('y', function(d) { return y(d) })
.attr('x', function(d, i) { return x(i) })
.on('mouseover', tip)
+ .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)
+ })
+
+ 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>
\ No newline at end of file
diff --git a/examples/circles.html b/examples/circles.html
index eea1671..b6db973 100644
--- a/examples/circles.html
+++ b/examples/circles.html
@@ -18,6 +18,12 @@
stroke: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
+
+ .rule {
+ stroke-width: 1px;
+ stroke: #c00;
+ shape-rendering: crispedges;
+ }
</style>
</head>
<body>
@@ -25,6 +31,7 @@
var w = 500,
h = 500,
r = 10,
+ linex, liney,
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]),
@@ -47,8 +54,34 @@
.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),
+ y = bbox.y;
+
+ 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')
</script>
</body>
</html>
\ No newline at end of file
diff --git a/src/d3.tip.js b/src/d3.tip.js
index 1b7beaa..33b7efa 100644
--- a/src/d3.tip.js
+++ b/src/d3.tip.js
@@ -1,59 +1,91 @@
d3.svg.tip = function() {
var orient = 'top',
- id = 'd3-tip',
- className = d3_svg_className,
- padding = d3_svg_padding,
+ padding = 5,
stemSize = 60,
offset = d3_svg_offset,
- text = d3_svg_text;
+ text = d3_svg_text,
+ node = make('g');
function tip(d, i) {
- 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);
+ this.ownerSVGElement.appendChild(node);
+
+ var tipOffset = offset.apply(this, arguments),
+ tipText = text.apply(this, arguments),
+ container = d3.select(node),
+ x, y;
- el.on('mouseout', function() { group.remove() })
-
- 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),
- ebbox = el.node().getBoundingClientRect(),
- stemBounds = stem.node().getBBox();
-
- if(typeof cnt === 'string' || typeof cnt === 'number') {
- var str = group.append('text')
- .text(cnt)
- .attr('text-anchor', 'middle')
- .attr('alignment-baseline', 'middle'),
- sbbox = str.node().getBoundingClientRect(),
- rectw = sbbox.width + padding(d, i) * 2,
- recth = sbbox.height + padding(d, i) * 2;
-
- rect.attr('width', rectw).attr('height', recth)
- var rbbox = rect.node().getBBox(),
- x = (ebbox.right - (ebbox.width / 2) - (rbbox.width / 2) - (stemBounds.width / 2)) + oset[0],
- y = (ebbox.top - rbbox.height) - stemBounds.height + oset[1];
-
- if(x <= 0) { x = 0 }
- if(x + rbbox.width > bounds.width) { x = bounds.width - rbbox.width }
- if(y <= 0) { y = 0 }
+ // Elements and Bounds
+ var doc = d3.select(this.ownerSVGElement),
+ target = d3.select(this),
+ backing = d3.select(make('rect')),
+ docRect = this.ownerSVGElement.getBoundingClientRect(),
+ targetRect = this.getBBox();
+
+ // FIXME: d3 has problems using `append` with nodes that were created
+ // but not immediately added to the SVG dom.
+ // Clear the container and add the rect backing
+ container.text(' ').node().appendChild(backing.node())
+
+ // 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();
+
+ backing.attr('width', valRect.width).attr('height', valRect.height)
+ val.attr('dx', valRect.width / 2).attr('dy', valRect.height / 2)
- 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) + ')')
+ var containerRect = container.node().getBBox();
+
+ switch(orient) {
+ case 'top':
+ x = targetRect.x + (targetRect.width / 2) - (containerRect.width / 2);
+ y = targetRect.y;
+ break;
}
-
- }
- function d3_svg_padding() {
- return 5;
+ container.attr('transform', 'translate(' + x + ',' + y + ')')
+ //ele.on('mouseout', function() { container.remove() })
+ // 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),
+ // rect = group.append('rect').attr('transform', 'translate(0,0)').attr('rx', 3).attr('ry', 3),
+ // stem = group.append('path').attr('d', symbol),
+ // ebbox = el.node().getBoundingClientRect(),
+ // stemBounds = stem.node().getBBox();
+
+ // //var rect = group.append('rect').attr('transform', 'translate(0,0)').attr('rx', 3).attr('ry', 3);
+ // //el.on('mouseout', function() { group.remove() })
+
+ // group.classed(klass, true) //.text(' ');
+
+ // if(typeof cnt === 'string' || typeof cnt === 'number') {
+ // var str = group.append('text')
+ // .text(cnt)
+ // .attr('text-anchor', 'middle')
+ // .attr('alignment-baseline', 'middle'),
+ // sbbox = str.node().getBoundingClientRect(),
+ // rectw = sbbox.width + padding(d, i) * 2,
+ // recth = sbbox.height + padding(d, i) * 2;
+
+ // rect.attr('width', rectw).attr('height', recth)
+ // var rbbox = rect.node().getBBox(),
+ // x = (ebbox.right - (ebbox.width / 2) - (rbbox.width / 2) - (stemBounds.width / 2)) + oset[0],
+ // y = (ebbox.top - rbbox.height) - stemBounds.height + oset[1];
+
+ // if(x <= 0) { x = 0 }
+ // if(x + rbbox.width > bounds.width) { x = bounds.width - rbbox.width }
+ // if(y <= 0) { y = 0 }
+
+ // 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_offset() {
@@ -64,34 +96,29 @@ d3.svg.tip = function() {
return ' ';
}
- function d3_svg_className() {
- return 'd3-tip';
+ tip.attr = function(n, v) {
+ d3.select(node).attr(n, v)
+ return tip;
}
-
+
tip.orient = function(v) {
if (!arguments.length) return orient;
- orient = v == null ? v: d3.functor(v);
+ orient = v;
return tip;
};
- tip.id = function(v) {
- if (!arguments.length) return id;
- id = v == null ? v: d3.functor(v);
+ tip.padding = function(v) {
+ if (!arguments.length) return padding;
+ padding = v;
return tip;
};
- tip.className = function(v) {
- if (!arguments.length) return className;
- className = v == null ? v: d3.functor(v);
+ tip.stemSize = function(v) {
+ if (!arguments.length) return stemSize;
+ stemSize = v;
return tip;
};
- 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);
@@ -105,5 +132,9 @@ d3.svg.tip = function() {
return tip;
};
+ function make(e) {
+ return document.createElementNS(d3.ns.prefix.svg, e);
+ }
+
return tip;
}
\ No newline at end of file
--
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