[Pkg-javascript-commits] [d3-tip.js] 262/277: make d3-tip work with d3js v4
bhuvan krishna
bhuvan-guest at moszumanska.debian.org
Thu Dec 8 06:57:37 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 8aeb6cbfe85d6338353bbb2ee9bb5c70b459bdc5
Author: Bruno Besson <bruno.besson at genostar.com>
Date: Tue Aug 9 15:59:05 2016 +0200
make d3-tip work with d3js v4
---
.gitignore | 1 +
bower.json | 2 +-
examples/arrow-styles.html | 8 +-
examples/bars.html | 10 +-
examples/bulk-attr-style.html | 17 ++--
examples/circles.html | 8 +-
examples/css-transitions.html | 10 +-
examples/explicit-target.html | 10 +-
examples/performance.html | 12 +--
examples/requirejs.html | 10 +-
index.js | 217 ++++++++++++++++++++++--------------------
11 files changed, 159 insertions(+), 146 deletions(-)
diff --git a/.gitignore b/.gitignore
index c3abebe..75e349f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ components
bower_components
node_modules
d3-tip.min.*
+/.project
diff --git a/bower.json b/bower.json
index da4bc84..78f07d5 100644
--- a/bower.json
+++ b/bower.json
@@ -12,6 +12,6 @@
"docs"
],
"dependencies": {
- "d3": "3.5.5"
+ "d3": ">=4.0"
}
}
diff --git a/examples/arrow-styles.html b/examples/arrow-styles.html
index 39ad1d3..68e14ed 100644
--- a/examples/arrow-styles.html
+++ b/examples/arrow-styles.html
@@ -43,16 +43,16 @@
<body>
<script type="text/javascript">
var data = [],
- random = d3.random.normal(5),
- random2 = d3.random.irwinHall(1)
+ random = d3.randomNormal(5),
+ random2 = d3.randomIrwinHall(1)
for(var i = 0; i < 25; i++) data.push(random(i))
var w = 200,
h = 200,
b = 20,
r = 10,
- x = d3.scale.linear().domain([0, data.length - 1]).range([r, w - r]),
- y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0])
+ x = d3.scaleLinear().domain([0, data.length - 1]).range([r, w - r]),
+ y = d3.scaleLinear().domain([0, d3.max(data)]).range([h, 0])
var directions = ['n', 'w', 'e', 's'];
directions.forEach(function (direction) {
diff --git a/examples/bars.html b/examples/bars.html
index e6dea5c..47889d1 100644
--- a/examples/bars.html
+++ b/examples/bars.html
@@ -59,10 +59,10 @@
var w = 800,
h = 300,
padt = 20, padr = 20, padb = 60, padl = 30,
- x = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
- y = d3.scale.linear().range([h, 0]),
- yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
- xAxis = d3.svg.axis().scale(x).orient('bottom')
+ x = d3.scaleBand().rangeRound([0, w - padl - padr]).padding(0.1),
+ y = d3.scaleLinear().range([h, 0]),
+ yAxis = d3.axisLeft().scale(y).tickSize(-w + padl + padr),
+ xAxis = d3.axisBottom().scale(x)
vis = d3.select('#graph')
.append('svg')
@@ -94,7 +94,7 @@
.attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })
bars.append('rect')
- .attr('width', function() { return x.rangeBand() })
+ .attr('width', function() { return x.bandwidth() })
.attr('height', function(d) { return h - y(d.total) })
.attr('y', function(d) { return y(d.total) })
.on('mouseover', tip.show)
diff --git a/examples/bulk-attr-style.html b/examples/bulk-attr-style.html
index 1d407ae..b7672c9 100644
--- a/examples/bulk-attr-style.html
+++ b/examples/bulk-attr-style.html
@@ -52,8 +52,11 @@
</div>
<script type="text/javascript">
var tip = d3.tip()
- .attr({'class': 'd3-tip', title: 'Some tooltip'})
- .style({border: '1px solid #fff', 'box-shadow': '1px 1px 4px rgba(0,0,0,0.5)', 'border-radius': 'none'})
+ .attr('class', 'd3-tip')
+ .attr('title', 'Some tooltip')
+ .style('border', '1px solid #fff')
+ .style('box-shadow', '1px 1px 4px rgba(0,0,0,0.5)')
+ .style('border-radius', 'none')
.html(function(d) { return '<span>' + d.total + '</span>' + ' entries' })
.offset([-12, 0])
@@ -61,10 +64,10 @@
var w = 800,
h = 300,
padt = 20, padr = 20, padb = 60, padl = 30,
- x = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
- y = d3.scale.linear().range([h, 0]),
- yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
- xAxis = d3.svg.axis().scale(x).orient('bottom')
+ x = d3.scaleBand().rangeRound([0, w - padl - padr]).padding(0.1),
+ y = d3.scaleLinear().range([h, 0]),
+ yAxis = d3.axisLeft().scale(y).tickSize(-w + padl + padr),
+ xAxis = d3.axisBottom().scale(x)
vis = d3.select('#graph')
.append('svg')
@@ -96,7 +99,7 @@
.attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })
bars.append('rect')
- .attr('width', function() { return x.rangeBand() })
+ .attr('width', function() { return x.bandwidth() })
.attr('height', function(d) { return h - y(d.total) })
.attr('y', function(d) { return y(d.total) })
.on('mouseover', function(d) {
diff --git a/examples/circles.html b/examples/circles.html
index bbeb08a..63e594a 100644
--- a/examples/circles.html
+++ b/examples/circles.html
@@ -47,8 +47,8 @@
<body>
<script type="text/javascript">
var data = [],
- random = d3.random.normal(5),
- random2 = d3.random.irwinHall(1)
+ random = d3.randomNormal(5),
+ random2 = d3.randomIrwinHall(1)
for(var i = 0; i < 100; i++) data.push(random(i))
var tip = d3.tip()
@@ -67,8 +67,8 @@
h = 500,
r = 10,
linex, liney,
- x = d3.scale.linear().domain([0, data.length - 1]).range([r, w - r]),
- y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0])
+ x = d3.scaleLinear().domain([0, data.length - 1]).range([r, w - r]),
+ y = d3.scaleLinear().domain([0, d3.max(data)]).range([h, 0])
var vis = d3.select(document.body)
.append('svg')
diff --git a/examples/css-transitions.html b/examples/css-transitions.html
index a7b41bc..083048e 100644
--- a/examples/css-transitions.html
+++ b/examples/css-transitions.html
@@ -105,10 +105,10 @@
var w = 800,
h = 300,
padt = 20, padr = 20, padb = 60, padl = 30,
- x = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
- y = d3.scale.linear().range([h, 0]),
- yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
- xAxis = d3.svg.axis().scale(x).orient('bottom')
+ x = d3.scaleBand().rangeRound([0, w - padl - padr]).padding(0.1),
+ y = d3.scaleLinear().range([h, 0]),
+ yAxis = d3.axisLeft().scale(y).tickSize(-w + padl + padr),
+ xAxis = d3.axisBottom().scale(x)
vis = d3.select('#graph')
.append('svg')
@@ -140,7 +140,7 @@
.attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })
bars.append('rect')
- .attr('width', function() { return x.rangeBand() })
+ .attr('width', function() { return x.bandwidth() })
.attr('height', function(d) { return h - y(d.total) })
.attr('y', function(d) { return y(d.total) })
.on('mouseover', function(d) {
diff --git a/examples/explicit-target.html b/examples/explicit-target.html
index 2c2b45c..49445e4 100644
--- a/examples/explicit-target.html
+++ b/examples/explicit-target.html
@@ -90,10 +90,10 @@
var w = 800,
h = 300,
padt = 40, padr = 20, padb = 60, padl = 30,
- x = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
- y = d3.scale.linear().range([h, 0]),
- yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
- xAxis = d3.svg.axis().scale(x).orient('bottom')
+ x = d3.scaleBand().rangeRound([0, w - padl - padr]).padding(0.1),
+ y = d3.scaleLinear().range([h, 0]),
+ yAxis = d3.axisLeft().scale(y).tickSize(-w + padl + padr),
+ xAxis = d3.axisBottom().scale(x)
vis = d3.select('#graph')
.append('svg')
@@ -132,7 +132,7 @@
.attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })
bars.append('rect')
- .attr('width', function() { return x.rangeBand() })
+ .attr('width', function() { return x.bandwidth() })
.attr('height', function(d) { return h - y(d.total) })
.attr('y', function(d) { return y(d.total) })
.on('mouseout', tip.hide)
diff --git a/examples/performance.html b/examples/performance.html
index fe8b4f4..8bb76e9 100644
--- a/examples/performance.html
+++ b/examples/performance.html
@@ -50,8 +50,8 @@
var RUNS = 3
var data = [],
- random = d3.random.normal(5),
- random2 = d3.random.irwinHall(1)
+ random = d3.randomNormal(5),
+ random2 = d3.randomIrwinHall(1)
for(var i = 0; i < NODES; i++) data.push(random(i))
var tip = d3.tip()
@@ -64,8 +64,8 @@
h = 500,
r = 10,
linex, liney,
- x = d3.scale.linear().domain([0, data.length - 1]).range([r, w - r]),
- y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0])
+ x = d3.scaleLinear().domain([0, data.length - 1]).range([r, w - r]),
+ y = d3.scaleLinear().domain([0, d3.max(data)]).range([h, 0])
var vis = d3.select(document.body)
.append('svg')
@@ -82,13 +82,13 @@
.data(data)
.enter().append('circle')
- circles.attr('r', function(d, i) { return random2(i) * 10 })
+ .attr('r', function(d, i) { return random2(i) * 10 })
.attr('cx', function(d, i) { return x(i) })
.attr('cy', y)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
- var elements = circles[0],
+ var elements = circles.nodes()[0],
length = elements.length
e = new MouseEvent('mouseover')
for(var i = 0; i <= RUNS; i++) {
diff --git a/examples/requirejs.html b/examples/requirejs.html
index 8886d02..c8ee941 100644
--- a/examples/requirejs.html
+++ b/examples/requirejs.html
@@ -64,10 +64,10 @@
var w = 800,
h = 300,
padt = 20, padr = 20, padb = 60, padl = 30,
- x = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
- y = d3.scale.linear().range([h, 0]),
- yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
- xAxis = d3.svg.axis().scale(x).orient('bottom')
+ x = d3.scaleBand().rangeRound([0, w - padl - padr]).padding(0.1),
+ y = d3.scaleLinear().range([h, 0]),
+ yAxis = d3.axisLeft().scale(y).tickSize(-w + padl + padr),
+ xAxis = d3.axisBottom().scale(x)
vis = d3.select('#graph')
.append('svg')
@@ -99,7 +99,7 @@
.attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })
bars.append('rect')
- .attr('width', function() { return x.rangeBand() })
+ .attr('width', function() { return x.bandwidth() })
.attr('height', function(d) { return h - y(d.total) })
.attr('y', function(d) { return y(d.total) })
.on('mouseover', tip.show)
diff --git a/index.js b/index.js
index 13e146b..91aefa2 100644
--- a/index.js
+++ b/index.js
@@ -6,16 +6,16 @@
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module with d3 as a dependency.
- define(['d3'], factory)
+ define(['d3'], factory);
} else if (typeof module === 'object' && module.exports) {
// CommonJS
module.exports = function(d3) {
- d3.tip = factory(d3)
- return d3.tip
- }
+ d3.tip = factory(d3);
+ return d3.tip;
+ };
} else {
// Browser global.
- root.d3.tip = factory(root.d3)
+ root.d3.tip = factory(root.d3);
}
}(this, function (d3) {
@@ -29,20 +29,20 @@
node = initNode(),
svg = null,
point = null,
- target = null
+ target = null;
function tip(vis) {
- svg = getSVGNode(vis)
- point = svg.createSVGPoint()
- document.body.appendChild(node)
+ svg = getSVGNode(vis);
+ point = svg.createSVGPoint();
+ document.body.appendChild(node);
}
// Public - show the tooltip on the screen
//
// Returns a tip
tip.show = function() {
- var args = Array.prototype.slice.call(arguments)
- if(args[args.length - 1] instanceof SVGElement) target = args.pop()
+ var args = Array.prototype.slice.call(arguments);
+ if(args[args.length - 1] instanceof SVGElement) target = args.pop();
var content = html.apply(this, args),
poffset = offset.apply(this, args),
@@ -51,29 +51,30 @@
i = directions.length,
coords,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
- scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
+ scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
nodel.html(content)
- .style({ opacity: 1, 'pointer-events': 'all' })
+ .style('opacity', 1).style('pointer-events', 'all');
- while(i--) nodel.classed(directions[i], false)
- coords = direction_callbacks.get(dir).apply(this)
- nodel.classed(dir, true).style({
- top: (coords.top + poffset[0]) + scrollTop + 'px',
- left: (coords.left + poffset[1]) + scrollLeft + 'px'
- })
+ while(i--) {
+ nodel.classed(directions[i], false);
+ }
+ coords = direction_callbacks.get(dir).apply(this);
+ nodel.classed(dir, true)
+ .style('top', (coords.top + poffset[0]) + scrollTop + 'px')
+ .style('left', (coords.left + poffset[1]) + scrollLeft + 'px');;
- return tip
- }
+ return tip;
+ };
// Public - hide the tooltip
//
// Returns a tip
tip.hide = function() {
- var nodel = getNodeEl()
- nodel.style({ opacity: 0, 'pointer-events': 'none' })
- return tip
- }
+ var nodel = getNodeEl();
+ nodel.style('opacity', 0).style('pointer-events', 'none');
+ return tip;
+ };
// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
//
@@ -83,14 +84,14 @@
// Returns tip or attribute value
tip.attr = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
- return getNodeEl().attr(n)
+ return getNodeEl().attr(n);
} else {
- var args = Array.prototype.slice.call(arguments)
- d3.selection.prototype.attr.apply(getNodeEl(), args)
+ var args = Array.prototype.slice.call(arguments);
+ d3.selection.prototype.attr.apply(getNodeEl(), args);
}
- return tip
- }
+ return tip;
+ };
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
//
@@ -100,14 +101,14 @@
// Returns tip or style property value
tip.style = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
- return getNodeEl().style(n)
+ return getNodeEl().style(n);
} else {
- var args = Array.prototype.slice.call(arguments)
- d3.selection.prototype.style.apply(getNodeEl(), args)
+ var args = Array.prototype.slice.call(arguments);
+ d3.selection.prototype.style.apply(getNodeEl(), args);
}
- return tip
- }
+ return tip;
+ };
// Public: Set or get the direction of the tooltip
//
@@ -116,11 +117,13 @@
//
// Returns tip or direction
tip.direction = function(v) {
- if (!arguments.length) return direction
- direction = v == null ? v : d3.functor(v)
+ if (!arguments.length) {
+ return direction;
+ }
+ direction = v == null ? v : functor(v);
- return tip
- }
+ return tip;
+ };
// Public: Sets or gets the offset of the tip
//
@@ -128,11 +131,13 @@
//
// Returns offset or
tip.offset = function(v) {
- if (!arguments.length) return offset
- offset = v == null ? v : d3.functor(v)
+ if (!arguments.length) {
+ return offset;
+ }
+ offset = v == null ? v : functor(v);
- return tip
- }
+ return tip;
+ };
// Public: sets or gets the html value of the tooltip
//
@@ -140,11 +145,13 @@
//
// Returns html value or tip
tip.html = function(v) {
- if (!arguments.length) return html
- html = v == null ? v : d3.functor(v)
+ if (!arguments.length) {
+ return html;
+ }
+ html = v == null ? v : functor(v);
- return tip
- }
+ return tip;
+ };
// Public: destroys the tooltip and removes it from the DOM
//
@@ -155,11 +162,11 @@
node = null;
}
return tip;
- }
+ };
- function d3_tip_direction() { return 'n' }
- function d3_tip_offset() { return [0, 0] }
- function d3_tip_html() { return ' ' }
+ function d3_tip_direction() { return 'n'; }
+ function d3_tip_offset() { return [0, 0]; }
+ function d3_tip_html() { return ' '; }
var direction_callbacks = d3.map({
n: direction_n,
@@ -172,91 +179,86 @@
se: direction_se
}),
- directions = direction_callbacks.keys()
+ directions = direction_callbacks.keys();
function direction_n() {
- var bbox = getScreenBBox()
+ var bbox = getScreenBBox();
return {
top: bbox.n.y - node.offsetHeight,
left: bbox.n.x - node.offsetWidth / 2
- }
+ };
}
function direction_s() {
- var bbox = getScreenBBox()
+ var bbox = getScreenBBox();
return {
top: bbox.s.y,
left: bbox.s.x - node.offsetWidth / 2
- }
+ };
}
function direction_e() {
- var bbox = getScreenBBox()
+ var bbox = getScreenBBox();
return {
top: bbox.e.y - node.offsetHeight / 2,
left: bbox.e.x
- }
+ };
}
function direction_w() {
- var bbox = getScreenBBox()
+ var bbox = getScreenBBox();
return {
top: bbox.w.y - node.offsetHeight / 2,
left: bbox.w.x - node.offsetWidth
- }
+ };
}
function direction_nw() {
- var bbox = getScreenBBox()
+ var bbox = getScreenBBox();
return {
top: bbox.nw.y - node.offsetHeight,
left: bbox.nw.x - node.offsetWidth
- }
+ };
}
function direction_ne() {
- var bbox = getScreenBBox()
+ var bbox = getScreenBBox();
return {
top: bbox.ne.y - node.offsetHeight,
left: bbox.ne.x
- }
+ };
}
function direction_sw() {
- var bbox = getScreenBBox()
+ var bbox = getScreenBBox();
return {
top: bbox.sw.y,
left: bbox.sw.x - node.offsetWidth
- }
+ };
}
function direction_se() {
- var bbox = getScreenBBox()
+ var bbox = getScreenBBox();
return {
top: bbox.se.y,
left: bbox.e.x
- }
+ };
}
function initNode() {
- var node = d3.select(document.createElement('div'))
- node.style({
- position: 'absolute',
- top: 0,
- opacity: 0,
- 'pointer-events': 'none',
- 'box-sizing': 'border-box'
- })
-
- return node.node()
+ var node = d3.select(document.createElement('div'));
+ node.style('position', 'absolute').style('top', 0).style('opacity', 0)
+ .style('pointer-events', 'none').style('box-sizing', 'border-box');
+
+ return node.node();
}
function getSVGNode(el) {
- el = el.node()
+ el = el.node();
if(el.tagName.toLowerCase() === 'svg')
- return el
+ return el;
- return el.ownerSVGElement
+ return el.ownerSVGElement;
}
function getNodeEl() {
@@ -294,31 +296,38 @@
width = tbbox.width,
height = tbbox.height,
x = tbbox.x,
- y = tbbox.y
-
- point.x = x
- point.y = y
- bbox.nw = point.matrixTransform(matrix)
- point.x += width
- bbox.ne = point.matrixTransform(matrix)
- point.y += height
- bbox.se = point.matrixTransform(matrix)
- point.x -= width
- bbox.sw = point.matrixTransform(matrix)
- point.y -= height / 2
- bbox.w = point.matrixTransform(matrix)
- point.x += width
- bbox.e = point.matrixTransform(matrix)
- point.x -= width / 2
- point.y -= height / 2
- bbox.n = point.matrixTransform(matrix)
- point.y += height
- bbox.s = point.matrixTransform(matrix)
-
- return bbox
+ y = tbbox.y;
+
+ point.x = x;
+ point.y = y;
+ bbox.nw = point.matrixTransform(matrix);
+ point.x += width;
+ bbox.ne = point.matrixTransform(matrix);
+ point.y += height;
+ bbox.se = point.matrixTransform(matrix);
+ point.x -= width;
+ bbox.sw = point.matrixTransform(matrix);
+ point.y -= height / 2;
+ bbox.w = point.matrixTransform(matrix);
+ point.x += width;
+ bbox.e = point.matrixTransform(matrix);
+ point.x -= width / 2;
+ point.y -= height / 2;
+ bbox.n = point.matrixTransform(matrix);
+ point.y += height;
+ bbox.s = point.matrixTransform(matrix);
+
+ return bbox;
+ }
+
+ // Private - replace D3JS 3.X d3.functor() function
+ function functor(v) {
+ return typeof v === "function" ? v : function() {
+ return v;
+ };
}
- return tip
+ 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