other/exif-graphr: d3.tip.js comparison

comparison d3.tip.js @ 0:42c058ce5b7c

Initial public commit of Exif-Graphr

author	IBBoard <dev@ibboard.co.uk>
date	Sun, 14 Aug 2016 20:46:16 +0100
parents
children	a11817a35877

comparison

equal deleted inserted replaced

--1:000000000000
+:42c058ce5b7c
+// d3.tip
+// Copyright (c) 2013 Justin Palmer
+//
+// Tooltips for d3.js SVG visualizations
+(function (root, factory) {
+if (typeof define === 'function' && define.amd) {
+// AMD. Register as an anonymous module with d3 as a dependency.
+define(['d3'], factory)
+} else {
+// Browser global.
+root.d3.tip = factory(root.d3)
+}
+}(this, function (d3) {
+// Public - contructs a new tooltip
+//
+// Returns a tip
+return function() {
+var direction = d3_tip_direction,
+offset    = d3_tip_offset,
+html      = d3_tip_html,
+node      = initNode(),
+svg       = null,
+point     = null,
+target    = null
+function tip(vis) {
+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 content = html.apply(this, args),
+poffset = offset.apply(this, args),
+dir     = direction.apply(this, args),
+nodel   = d3.select(node),
+i       = directions.length,
+coords,
+scrollTop  = document.documentElement.scrollTop || document.body.scrollTop,
+scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
+nodel.html(content)
+.style({ opacity: 1, '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'
+})
+return tip
+}
+// Public - hide the tooltip
+//
+// Returns a tip
+tip.hide = function() {
+var nodel = d3.select(node)
+nodel.style({ opacity: 0, 'pointer-events': 'none' })
+return tip
+}
+// Public: Proxy attr calls to the d3 tip container.  Sets or gets attribute value.
+//
+// n - name of the attribute
+// v - value of the attribute
+//
+// Returns tip or attribute value
+tip.attr = function(n, v) {
+if (arguments.length < 2 && typeof n === 'string') {
+return d3.select(node).attr(n)
+} else {
+var args =  Array.prototype.slice.call(arguments)
+d3.selection.prototype.attr.apply(d3.select(node), args)
+}
+return tip
+}
+// Public: Proxy style calls to the d3 tip container.  Sets or gets a style value.
+//
+// n - name of the property
+// v - value of the property
+//
+// Returns tip or style property value
+tip.style = function(n, v) {
+if (arguments.length < 2 && typeof n === 'string') {
+return d3.select(node).style(n)
+} else {
+var args =  Array.prototype.slice.call(arguments)
+d3.selection.prototype.style.apply(d3.select(node), args)
+}
+return tip
+}
+// Public: Set or get the direction of the tooltip
+//
+// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
+//     sw(southwest), ne(northeast) or se(southeast)
+//
+// Returns tip or direction
+tip.direction = function(v) {
+if (!arguments.length) return direction
+direction = v == null ? v : d3.functor(v)
+return tip
+}
+// Public: Sets or gets the offset of the tip
+//
+// v - Array of [x, y] offset
+//
+// Returns offset or
+tip.offset = function(v) {
+if (!arguments.length) return offset
+offset = v == null ? v : d3.functor(v)
+return tip
+}
+// Public: sets or gets the html value of the tooltip
+//
+// v - String value of the tip
+//
+// Returns html value or tip
+tip.html = function(v) {
+if (!arguments.length) return html
+html = v == null ? v : d3.functor(v)
+return tip
+}
+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,
+s:  direction_s,
+e:  direction_e,
+w:  direction_w,
+nw: direction_nw,
+ne: direction_ne,
+sw: direction_sw,
+se: direction_se
+}),
+directions = direction_callbacks.keys()
+function direction_n() {
+var bbox = getScreenBBox()
+return {
+top:  bbox.n.y - node.offsetHeight,
+left: bbox.n.x - node.offsetWidth / 2
+}
+}
+function direction_s() {
+var bbox = getScreenBBox()
+return {
+top:  bbox.s.y,
+left: bbox.s.x - node.offsetWidth / 2
+}
+}
+function direction_e() {
+var bbox = getScreenBBox()
+return {
+top:  bbox.e.y - node.offsetHeight / 2,
+left: bbox.e.x
+}
+}
+function direction_w() {
+var bbox = getScreenBBox()
+return {
+top:  bbox.w.y - node.offsetHeight / 2,
+left: bbox.w.x - node.offsetWidth
+}
+}
+function direction_nw() {
+var bbox = getScreenBBox()
+return {
+top:  bbox.nw.y - node.offsetHeight,
+left: bbox.nw.x - node.offsetWidth
+}
+}
+function direction_ne() {
+var bbox = getScreenBBox()
+return {
+top:  bbox.ne.y - node.offsetHeight,
+left: bbox.ne.x
+}
+}
+function direction_sw() {
+var bbox = getScreenBBox()
+return {
+top:  bbox.sw.y,
+left: bbox.sw.x - node.offsetWidth
+}
+}
+function direction_se() {
+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()
+}
+function getSVGNode(el) {
+el = el.node()
+if(el.tagName.toLowerCase() === 'svg')
+return el
+return el.ownerSVGElement
+}
+// Private - gets the screen coordinates of a shape
+//
+// 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).
+//
+//    +-+-+
+//    |   |
+//    +   +
+//    |   |
+//    +-+-+
+//
+// Returns an Object {n, s, e, w, nw, sw, ne, se}
+function getScreenBBox() {
+var targetel   = target || d3.event.target,
+bbox       = {},
+matrix     = targetel.getScreenCTM(),
+tbbox      = targetel.getBBox(),
+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
+}
+return tip
+};
+}));