Launch Week Day 5: Introducing Reachability for PHP.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

d3-tip

Package Overview
Dependencies
Maintainers
2
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3-tip - npm Package Compare versions

Comparing version
0.7.1
 to
0.8.0-alpha.1
+15
.editorconfig
# EditorConfig is awesome: http://EditorConfig.org
root = true
[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
# Markdown
[*.md]
indent_size = 4
trim_trailing_whitespace = false
+59
.eslintrc.yaml
---
root: true
extends:
- airbnb-base/legacy
env:
browser: true
node: true
amd: true
rules:
# Customised whitespace
max-len:
- 1
- 80
- 2
-
ignoreUrls: true
ignoreComments: false
indent:
- 1
- 2
-
SwitchCase: 1
VariableDeclarator:
var: 2
let: 2
const: 3
outerIIFEBody: 1
no-multi-spaces:
- 1
-
exceptions:
VariableDeclarator: true
key-spacing:
- 1
-
align: value
space-before-function-paren:
- 1
- never
# Customised to existing code's style
semi:
- 1
- never
# You don't need this one when you know your operators
no-mixed-operators: 0
# Additional rules
func-names: 0
# Disabled for IE8 support
comma-dangle: 0
# Airbnb rules that were disabled due to too many conflicts
# with the existing code style
vars-on-top: 0
one-var: 0
no-use-before-define: 0
+16
circle.yml
## Customize the test machine
machine:
# Version of Node to use
node:
version: 6.1.0
## Customize dependencies
dependencies:
override:
- npm prune
- npm install
## Customize test command
test:
override:
- npm run -s circle:lint
+3
-2
bower.json
{
"name": "d3-tip",
"version": "0.7.1",
"version": "0.8.0-alpha.1",
"main": "index.js",

@@ -15,4 +15,5 @@ "ignore": [

"dependencies": {
"d3": "^4.2"
"d3-collection": "^1.0.1",
"d3-selection": "^1.0.2"
}
}
+11
-0
docs/positioning-tooltips.md

@@ -43,1 +43,12 @@ [API Documentation](index.md) ➤ Positioning tooltips

```
### tip.rootElement([function|Node])
You can also specify the rootElement which is `document.body` by default.
```javascript
var tip = d3.tip()
.attr('class', 'd3-tip')
.rootElement(document.getElementById('graph'))
.html(function(d) { return d; })
```
+3
-0
examples/bars.html

@@ -56,2 +56,5 @@ <!DOCTYPE html>

.attr('class', 'd3-tip')
.rootElement(function(){
return document.getElementById('graph');
})
.html(function(d) { return '<span>' + d.total + '</span>' + ' entries' })

@@ -58,0 +61,0 @@ .offset([-12, 0])

+120
-91
index.js

@@ -1,20 +0,29 @@

// d3.tip
// Copyright (c) 2013 Justin Palmer
//
// Tooltips for d3.js SVG visualizations
(function (root, factory) {
/**
* d3.tip
* Copyright (c) 2013 Justin Palmer
*
* Tooltips for d3.js SVG visualizations
*/
// eslint-disable-next-line no-extra-semi
;(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-collection',
'd3-selection'
], factory)
} else if (typeof module === 'object' && module.exports) {
/* eslint-disable global-require */
// CommonJS
var d3 = require('d3')
module.exports = factory(d3)
var d3Collection = require('d3-collection'),
d3Selection = require('d3-selection')
module.exports = factory(d3Collection, d3Selection)
/* eslint-enable global-require */
} else {
// Browser global.
root.d3.tip = factory(root.d3)
var d3 = root.d3
// eslint-disable-next-line no-param-reassign
root.d3.tip = factory(d3, d3)
}
}(this, function (d3) {
}(this, function(d3Collection, d3Selection) {
// Public - contructs a new tooltip

@@ -24,14 +33,16 @@ //

return function() {
var direction = d3_tip_direction,
offset = d3_tip_offset,
html = d3_tip_html,
node = initNode(),
svg = null,
point = null,
target = null
var direction = d3TipDirection,
offset = d3TipOffset,
html = d3TipHTML,
rootElement = document.body,
node = initNode(),
svg = null,
point = null,
target = null
function tip(vis) {
svg = getSVGNode(vis)
if (!svg) return
point = svg.createSVGPoint()
document.body.appendChild(node)
rootElement.appendChild(node)
}

@@ -44,3 +55,3 @@

var args = Array.prototype.slice.call(arguments)
if(args[args.length - 1] instanceof SVGElement) target = args.pop()
if (args[args.length - 1] instanceof SVGElement) target = args.pop()

@@ -53,4 +64,6 @@ var content = html.apply(this, args),

coords,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
scrollTop = document.documentElement.scrollTop ||
rootElement.scrollTop,
scrollLeft = document.documentElement.scrollLeft ||
rootElement.scrollLeft

@@ -60,10 +73,10 @@ nodel.html(content)

while(i--) nodel.classed(directions[i], false)
coords = direction_callbacks.get(dir).apply(this)
while (i--) nodel.classed(directions[i], false)
coords = directionCallbacks.get(dir).apply(this)
nodel.classed(dir, true)
.style('top', (coords.top + poffset[0]) + scrollTop + 'px')
.style('left', (coords.left + poffset[1]) + scrollLeft + 'px')
.style('top', (coords.top + poffset[0]) + scrollTop + 'px')
.style('left', (coords.left + poffset[1]) + scrollLeft + 'px')
return tip;
};
return tip
}

@@ -79,3 +92,4 @@ // Public - hide the tooltip

// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
// Public: Proxy attr calls to the d3 tip container.
// Sets or gets attribute value.
//

@@ -86,14 +100,15 @@ // n - name of the attribute

// Returns tip or attribute value
// eslint-disable-next-line no-unused-vars
tip.attr = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
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)
d3Selection.selection.prototype.attr.apply(getNodeEl(), args)
return tip
}
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
// Public: Proxy style calls to the d3 tip container.
// Sets or gets a style value.
//

@@ -104,10 +119,10 @@ // n - name of the property

// Returns tip or style property value
// eslint-disable-next-line no-unused-vars
tip.style = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
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)
d3Selection.selection.prototype.style.apply(getNodeEl(), args)
return tip

@@ -153,2 +168,14 @@ }

// Public: sets or gets the root element anchor of the tooltip
//
// v - root element of the tooltip
//
// Returns root node of tip
tip.rootElement = function(v) {
if (!arguments.length) return rootElement
rootElement = v == null ? v : functor(v)
return tip
}
// Public: destroys the tooltip and removes it from the DOM

@@ -158,27 +185,26 @@ //

tip.destroy = function() {
if(node) {
getNodeEl().remove();
node = null;
if (node) {
getNodeEl().remove()
node = null
}
return tip;
return tip
}
function d3_tip_direction() { return 'n' }
function d3_tip_offset() { return [0, 0] }
function d3_tip_html() { return ' ' }
function d3TipDirection() { return 'n' }
function d3TipOffset() { return [0, 0] }
function d3TipHTML() { return ' ' }
var direction_callbacks = d3.map({
n: direction_n,
s: direction_s,
e: direction_e,
w: direction_w,
nw: direction_nw,
ne: direction_ne,
sw: direction_sw,
se: direction_se
}),
var directionCallbacks = d3Collection.map({
n: directionNorth,
s: directionSouth,
e: directionEast,
w: directionWest,
nw: directionNorthWest,
ne: directionNorthEast,
sw: directionSouthWest,
se: directionSouthEast
}),
directions = directionCallbacks.keys()
directions = direction_callbacks.keys()
function direction_n() {
function directionNorth() {
var bbox = getScreenBBox()

@@ -191,3 +217,3 @@ return {

function direction_s() {
function directionSouth() {
var bbox = getScreenBBox()

@@ -200,3 +226,3 @@ return {

function direction_e() {
function directionEast() {
var bbox = getScreenBBox()

@@ -209,3 +235,3 @@ return {

function direction_w() {
function directionWest() {
var bbox = getScreenBBox()

@@ -218,3 +244,3 @@ return {

function direction_nw() {
function directionNorthWest() {
var bbox = getScreenBBox()

@@ -227,3 +253,3 @@ return {

function direction_ne() {
function directionNorthEast() {
var bbox = getScreenBBox()

@@ -236,3 +262,3 @@ return {

function direction_sw() {
function directionSouthWest() {
var bbox = getScreenBBox()

@@ -245,7 +271,7 @@ return {

function direction_se() {
function directionSouthEast() {
var bbox = getScreenBBox()
return {
top: bbox.se.y,
left: bbox.e.x
left: bbox.se.x
}

@@ -255,24 +281,27 @@ }

function initNode() {
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')
var div = d3Selection.select(document.createElement('div'))
div
.style('position', 'absolute')
.style('top', 0)
.style('opacity', 0)
.style('pointer-events', 'none')
.style('box-sizing', 'border-box')
return node.node()
return div.node()
}
function getSVGNode(el) {
el = el.node()
if(el.tagName.toLowerCase() === 'svg')
return el
return el.ownerSVGElement
function getSVGNode(element) {
var svgNode = element.node()
if (!svgNode) return null
if (svgNode.tagName.toLowerCase() === 'svg') return svgNode
return svgNode.ownerSVGElement
}
function getNodeEl() {
if(node === null) {
node = initNode();
if (node == null) {
node = initNode()
// re-add node to DOM
document.body.appendChild(node);
};
return d3.select(node);
rootElement.appendChild(node)
}
return d3Selection.select(node)
}

@@ -283,4 +312,4 @@

// Given a shape on the screen, will return an SVGPoint for the directions
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
// sw(southwest).
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast),
// nw(northwest), sw(southwest).
//

@@ -295,6 +324,6 @@ // +-+-+

function getScreenBBox() {
var targetel = target || d3.event.target;
var targetel = target || d3Selection.event.target
while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) {
targetel = targetel.parentNode;
while (targetel.getScreenCTM == null && targetel.parentNode == null) {
targetel = targetel.parentNode
}

@@ -320,3 +349,3 @@

point.y -= height / 2
bbox.w = point.matrixTransform(matrix)
bbox.w = point.matrixTransform(matrix)
point.x += width

@@ -332,13 +361,13 @@ bbox.e = point.matrixTransform(matrix)

}
// Private - replace D3JS 3.X d3.functor() function
function functor(v) {
return typeof v === "function" ? v : function() {
return typeof v === 'function' ? v : function() {
return v
}
}
}
return tip
};
}
// eslint-disable-next-line semi
}));
+27
-13
package.json
{
"name": "d3-tip",
"version": "0.7.1",
"version": "0.8.0-alpha.1",
"description": "Tooltips for d3 svg visualizations",
"keywords": [
"d3",
"tooltip"
],
"homepage": "https://github.com/Caged/d3-tip",
"bugs": {
"url": "https://github.com/Caged/d3-tip/issues"
},
"license": "MIT",
"author": "Justin Palmer <justin@labratrevenge.com> (http://labratrevenge.com/d3-tip)",

@@ -11,5 +20,2 @@ "main": "index.js",

},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {

@@ -19,14 +25,22 @@ "type": "git",

},
"keywords": [
"d3",
"tooltip"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/Caged/d3-tip/issues"
"scripts": {
"circle:lint": "npm run -s lint -- --max-warnings 0 -f junit -o $CIRCLE_TEST_REPORTS/eslint/junit.xml",
"lint": "eslint .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"homepage": "https://github.com/Caged/d3-tip",
"dependencies": {
"d3": "^4.2"
"d3-collection": "^1.0.1",
"d3-selection": "^1.0.2"
},
"devDependencies": {
"eslint": "^3.3.1",
"eslint-config-airbnb-base": "^5.0.3",
"eslint-plugin-import": "^1.14.0"
},
"engines": {
"node": ">=4.2.6"
},
"greenkeeper": {
"branchPrefix": "greenkeeper/"
}
}
+2
-1
README.md

@@ -29,3 +29,4 @@ # d3.tip: Tooltips for d3.js visualizations

.data(data)
.enter().append('rect')
.enter()
.append('rect')
.attr('width', function() { return x.rangeBand() })

@@ -32,0 +33,0 @@ .attr('height', function(d) { return h - y(d) })