d3-selection
Advanced tools
d3-selection - npm Package Compare versions
Comparing version 0.4.12 to 0.5.0
@@ -1,1 +0,1 @@ | ||
| var version = "0.4.12"; export * from "../index"; export {version}; | ||
| var version = "0.5.0"; export * from "../index"; export {version}; |
@@ -24,3 +24,3 @@ (function (global, factory) { | ||
| function selection_event(type, listener, capture) { | ||
| function selection_on(type, listener, capture) { | ||
| var n = arguments.length, | ||
@@ -235,3 +235,3 @@ key = "__on" + type, | ||
| function selection_class(name, value) { | ||
| function selection_classed(name, value) { | ||
| name = (name + "").trim().split(/^|\s+/); | ||
@@ -590,2 +590,8 @@ var n = name.length; | ||
| function constant(x) { | ||
| return function() { | ||
| return x; | ||
| }; | ||
| }; | ||
| var keyPrefix = "$"; | ||
@@ -606,7 +612,10 @@ | ||
| stack = new Array(depth * 2), | ||
| bind = key ? bindKey : bindIndex; | ||
| bind = key ? bindKey : bindIndex, | ||
| enter = this.enter(), // Note: arrayify’s! | ||
| exit = this.exit(); | ||
| if (typeof value !== "function") value = valueOf_(value); | ||
| visit(this._root, this.enter()._root, this.exit()._root, depth); | ||
| if (typeof value !== "function") value = constant(value); | ||
| visit(this._root, enter._root, exit._root, depth); | ||
| function visit(update, enter, exit, depth) { | ||
@@ -771,8 +780,2 @@ var i = -1, | ||
| function valueOf_(value) { // XXX https://github.com/rollup/rollup/issues/12 | ||
| return function() { | ||
| return value; | ||
| }; | ||
| } | ||
| // The filter may either be a selector string (e.g., ".foo") | ||
@@ -973,12 +976,9 @@ // or a function that returns a boolean. | ||
| property: selection_property, | ||
| class: selection_class, | ||
| classed: selection_class, // deprecated alias | ||
| classed: selection_classed, | ||
| text: selection_text, | ||
| html: selection_html, | ||
| append: selection_append, | ||
| insert: selection_append, // deprecated alias | ||
| remove: selection_remove, | ||
| datum: selection_datum, | ||
| event: selection_event, | ||
| on: selection_event, // deprecated alias | ||
| on: selection_on, | ||
| dispatch: selection_dispatch | ||
@@ -1043,3 +1043,3 @@ }; | ||
| var version = "0.4.12"; | ||
| var version = "0.5.0"; | ||
@@ -1046,0 +1046,0 @@ exports.version = version; |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3-selection",["exports"],e):e(t.d3_selection={})}(this,function(t){"use strict";function e(t){return t.replace(rt,"\\$&")}function n(t,n,a){function u(){for(var e=p,o=arguments.length>>1,u=new Array(o);--o>=0;)e=e[arguments[(o<<1)+1]],u[o]=o?e._parent:e;var c=r(n,u,arguments);l&&(c=i(c)),s.call(this),this.addEventListener(t,this[f]=c,c._capture=a),c._listener=n}function s(){var e=this[f];e&&(this.removeEventListener(t,e,e._capture),delete this[f])}function c(){var n,r=new RegExp("^__on([^.]+)"+e(t)+"$");for(var i in this)if(n=i.match(r)){var o=this[i];this.removeEventListener(n[1],o,o._capture),delete this[i]}}var l,h=arguments.length,f="__on"+t,p=this._root;return 2>h?(h=this.node()[f])&&h._listener:(3>h&&(a=!1),(h=t.indexOf("."))>0&&(t=t.slice(0,h)),(l=it.hasOwnProperty(t))&&(t=it[t]),this.each(n?h?u:o:h?s:c))}function r(e,n,r){return function(i){for(var o=n.length,a=t.event;--o>=0;)r[o<<1]=n[o].__data__;t.event=i;try{e.apply(n[0],r)}finally{t.event=a}}}function i(t){return function(e){var n=e.relatedTarget;n&&(n===this||8&n.compareDocumentPosition(this))||t(e)}}function o(){}function a(){for(var e,n=t.event;e=n.sourceEvent;)n=e;return n}function u(t){return t&&(t.ownerDocument&&t.ownerDocument.defaultView||t.document&&t||t.defaultView)}function s(t,e){function n(){return c(this,t,e)}function r(){return c(this,t,e.apply(this,arguments))}return this.each("function"==typeof e?r:n)}function c(t,e,n){var r=u(t),i=r.CustomEvent;i?i=new i(e,n):(i=r.document.createEvent("Event"),n?(i.initEvent(e,n.bubbles,n.cancelable),i.detail=n.detail):i.initEvent(e,!1,!1)),t.dispatchEvent(i)}function l(t){return arguments.length?this.property("__data__",t):this.node().__data__}function h(){return this.each(function(){var t=this.parentNode;t&&t.removeChild(this)})}function f(t){var e=t.indexOf(":"),n=t;return e>=0&&"xmlns"!==(n=t.slice(0,e))&&(t=t.slice(e+1)),at.hasOwnProperty(n)?{space:at[n],local:t}:t}function p(t){return function(){return this.querySelector(t)}}function _(t,e){function n(){return this.appendChild(t.apply(this,arguments))}function r(){return this.insertBefore(t.apply(this,arguments),e.apply(this,arguments)||null)}return"function"!=typeof t&&(t=d(t)),this.select(arguments.length<2?n:("function"!=typeof e&&(e=p(e)),r))}function d(t){function e(){var e=this.ownerDocument,n=this.namespaceURI;return n?e.createElementNS(n,t):e.createElement(t)}function n(){return this.ownerDocument.createElementNS(t.space,t.local)}return t=f(t),t.local?n:e}function g(t){function e(){this.innerHTML=t}function n(){var e=t.apply(this,arguments);this.innerHTML=null==e?"":e}return arguments.length?(null==t&&(t=""),this.each("function"==typeof t?n:e)):this.node().innerHTML}function m(t){function e(){this.textContent=t}function n(){var e=t.apply(this,arguments);this.textContent=null==e?"":e}return arguments.length?(null==t&&(t=""),this.each("function"==typeof t?n:e)):this.node().textContent}function v(t,e){function n(){for(var n=-1;++n<i;)t[n](this,e)}function r(){for(var n=-1,r=e.apply(this,arguments);++n<i;)t[n](this,r)}t=(t+"").trim().split(/^|\s+/);var i=t.length;if(arguments.length<2){var o=this.node(),a=-1;if(e=o.classList){for(;++a<i;)if(!e.contains(t[a]))return!1}else for(e=o.getAttribute("class");++a<i;)if(!A(t[a]).test(e))return!1;return!0}return t=t.map(y),this.each("function"==typeof e?r:n)}function y(t){var e;return function(n,r){if(i=n.classList)return r?i.add(t):i.remove(t);e||(e=A(t));var i=n.getAttribute("class")||"";r?(e.lastIndex=0,e.test(i)||n.setAttribute("class",w(i+" "+t))):n.setAttribute("class",w(i.replace(e," ")))}}function w(t){return t.trim().replace(/\s+/g," ")}function A(t){return new RegExp("(?:^|\\s+)"+e(t)+"(?:\\s+|$)","g")}function x(t,e){function n(){delete this[t]}function r(){this[t]=e}function i(){var n=e.apply(this,arguments);null==n?delete this[t]:this[t]=n}return arguments.length<2?this.node()[t]:this.each(null==e?n:"function"==typeof e?i:r)}function b(t,e,n){function r(){this.style.removeProperty(t)}function i(){this.style.setProperty(t,e,n)}function o(){var r=e.apply(this,arguments);null==r?this.style.removeProperty(t):this.style.setProperty(t,r,n)}var a=arguments.length;return 2>a?u(a=this.node()).getComputedStyle(a,null).getPropertyValue(t):(3>a&&(n=""),this.each(null==e?r:"function"==typeof e?o:i))}function S(t,e){function n(){this.removeAttribute(t)}function r(){this.removeAttributeNS(t.space,t.local)}function i(){this.setAttribute(t,e)}function o(){this.setAttributeNS(t.space,t.local,e)}function a(){var n=e.apply(this,arguments);null==n?this.removeAttribute(t):this.setAttribute(t,n)}function u(){var n=e.apply(this,arguments);null==n?this.removeAttributeNS(t.space,t.local):this.setAttributeNS(t.space,t.local,n)}if(t=f(t),arguments.length<2){var s=this.node();return t.local?s.getAttributeNS(t.space,t.local):s.getAttribute(t)}return this.each(null==e?t.local?r:n:"function"==typeof e?t.local?u:a:t.local?o:i)}function E(t){function e(n,i){var o,a=-1,u=n.length;if(--i)for(var s=2*i,c=s+1;++a<u;)(o=n[a])&&(r[s]=o._parent.__data__,r[c]=a,e(o,i));else for(;++a<u;)(o=n[a])&&(r[0]=o.__data__,r[1]=a,t.apply(o,r))}var n=this._depth,r=new Array(n);return e(this._root,n),this}function C(){return!this.node()}function M(){var t=0;return this.each(function(){++t}),t}function N(){return T(this._root,this._depth)}function T(t,e){var n,r=-1,i=t.length;if(--e){for(;++r<i;)if((n=t[r])&&(n=T(n,e)))return n}else for(;++r<i;)if(n=t[r])return n}function L(){var t=new Array(this.size()),e=-1;return this.each(function(){t[++e]=this}),t}function P(){var t=arguments[0];return t.apply(arguments[0]=this,arguments),this}function D(t){return t._root=V(t._root,t._depth)}function V(t,e){var n,r=-1,i=t.length;if(--e)for(;++r<i;)(n=t[r])&&(t[r]=V(n,e));else if(!Array.isArray(t)){for(var o=new Array(i);++r<i;)o[r]=t[r];o._parent=t._parent,t=o}return t}function B(t){function e(e,n){return e&&n?t(e.__data__,n.__data__):!e-!n}function n(t,r){if(--r)for(var i,o=-1,a=t.length;++o<a;)(i=t[o])&&n(i,r);else t.sort(e)}return t||(t=R),n(D(this),this._depth),this.order()}function R(t,e){return e>t?-1:t>e?1:t>=e?0:NaN}function q(){return X(this._root,this._depth),this}function X(t,e){var n,r,i=t.length;if(--e)for(;--i>=0;)(n=t[i])&&X(n,e);else for(r=t[--i];--i>=0;)(n=t[i])&&(r&&r!==n.nextSibling&&r.parentNode.insertBefore(n,r),r=n)}function $(t){return new W(z(D(t),t._depth),t._depth)}function z(t,e){var n,r=-1,i=t.length,o=new Array(i);if(--e)for(;++r<i;)(n=t[r])&&(o[r]=z(n,e));return o._parent=t._parent,o}function I(){return this._exit||(this._exit=$(this))}function O(){return this._enter||(this._enter=$(this),this._enter._update=this),this._enter}function Y(t,e){function n(e,r,i,o){var a,u,l=-1;if(o--){var h=2*o,f=h+1;for(a=e.length;++l<a;)(u=e[l])&&(s[h]=u._parent.__data__,s[f]=l,n(u,r[l],i[l],o))}else{var p,_=0;for(c(e,r,i,t.apply(e._parent,s)),a=e.length;++l<a;)if(p=r[l]){for(l>=_&&(_=l+1);!(u=e[_])&&++_<a;);p._next=u||null}}}function r(t,e,n,r){var i,o=0,a=t.length,u=r.length,s=Math.min(a,u);for(e.length=0,e.length=u,n.length=0,n.length=a;s>o;++o)(i=t[o])?i.__data__=r[o]:e[o]=new k(t._parent,r[o]);for(;u>o;++o)e[o]=new k(t._parent,r[o]);for(;a>o;++o)(i=t[o])&&(n[o]=t[o]);t.length=u}function i(t,n,r,i){var o,a,u,c=i.length,l=t.length,h={},f=new Array(2).concat(s),p=new Array(l);for(n.length=0,n.length=c,r.length=0,r.length=l,o=0;l>o;++o)(a=t[o])&&(f[0]=a.__data__,f[1]=o,p[o]=u=ut+e.apply(a,f),h[u]?r[o]=a:h[u]=a);for(t.length=0,t.length=c,o=0;c>o;++o)f[0]=i[o],f[1]=o,u=ut+e.apply(t._parent,f),(a=h[u])?a!==!0&&(t[o]=a,a.__data__=i[o]):n[o]=new k(t._parent,i[o]),h[u]=!0;for(o=0;l>o;++o)(a=h[p[o]])!==!0&&(r[o]=a)}if(!t){var o=new Array(this.size()),a=-1;return this.each(function(t){o[++a]=t}),o}var u=this._depth-1,s=new Array(2*u),c=e?i:r;return"function"!=typeof t&&(t=G(t)),n(this._root,this.enter()._root,this.exit()._root,u),this}function k(t,e){this.ownerDocument=t.ownerDocument,this.namespaceURI=t.namespaceURI,this._next=null,this._parent=t,this.__data__=e}function G(t){return function(){return t}}function H(t){function e(n,i){var o,a,u=-1,s=n.length;if(--i){var c=2*i,l=c+1;for(a=new Array(s);++u<s;)(o=n[u])&&(r[c]=o._parent.__data__,r[l]=u,a[u]=e(o,i))}else for(a=[];++u<s;)(o=n[u])&&(r[0]=o.__data__,r[1]=u,t.apply(o,r)&&a.push(o));return a._parent=n._parent,a}var n=this._depth,r=new Array(2*n);return"function"!=typeof t&&(t=st(t)),new W(e(this._root,n),n)}function U(t){function e(n,i){var o,a,u=-1,s=n.length,c=new Array(s);if(--i)for(var l=2*i,h=l+1;++u<s;)(o=n[u])&&(r[l]=o._parent.__data__,r[h]=u,c[u]=e(o,i));else for(;++u<s;)(o=n[u])&&(r[0]=o.__data__,r[1]=u,c[u]=a=t.apply(o,r),a._parent=o);return c._parent=n._parent,c}var n=this._depth,r=new Array(2*n);return"function"!=typeof t&&(t=j(t)),new W(e(this._root,n),n+1)}function j(t){return function(){return this.querySelectorAll(t)}}function K(t){function e(n,i,o){var a,u,s=-1,c=n.length,l=new Array(c);if(--o)for(var h=2*o,f=h+1;++s<c;)(a=n[s])&&(r[h]=a._parent.__data__,r[f]=s,l[s]=e(a,i&&i[s],o));else for(;++s<c;)(a=n[s])&&(r[0]=a.__data__,r[1]=s,(u=t.apply(a,r))&&("__data__"in a&&(u.__data__=a.__data__),i&&(i[s]=u,delete n[s]),l[s]=u));return l._parent=n._parent,l}var n=this._depth,r=new Array(2*n);return"function"!=typeof t&&(t=p(t)),new W(e(this._root,this._update&&this._update._root,n),n)}function W(t,e){this._root=t,this._depth=e,this._enter=this._update=this._exit=null}function F(){return new W([document.documentElement],1)}function J(t){return new W(["string"==typeof t?document.querySelector(t):t],1)}function Q(t,e){var n=t.ownerSVGElement||t;if(n.createSVGPoint){var r=n.createSVGPoint();if(0>ht){var i=defaultView(t);if(i.scrollX||i.scrollY){n=J(i.document.body).append("svg").style({position:"absolute",top:0,left:0,margin:0,padding:0,border:"none"},"important");var o=n.node().getScreenCTM();ht=!(o.f||o.e),n.remove()}}return ht?(r.x=e.pageX,r.y=e.pageY):(r.x=e.clientX,r.y=e.clientY),r=r.matrixTransform(t.getScreenCTM().inverse()),[r.x,r.y]}var a=t.getBoundingClientRect();return[e.clientX-a.left-t.clientLeft,e.clientY-a.top-t.clientTop]}function Z(t,e){return arguments.length<2&&(e=a()),e.changedTouches&&(e=e.changedTouches[0]),Q(t,e)}function tt(t){return new W("string"==typeof t?document.querySelectorAll(t):t,1)}function et(t,e,n){arguments.length<3&&(n=e,e=a().changedTouches);for(var r,i=0,o=e?e.length:0;o>i;++i)if((r=e[i]).identifier===n)return Q(t,r);return null}function nt(t,e){arguments.length<2&&(e=a().touches);for(var n=0,r=e?e.length:0,i=new Array(r);r>n;++n)i[n]=Q(t,e[n]);return i}var rt=/[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g,it={};if(t.event=null,"undefined"!=typeof document){var ot=document.documentElement;"onmouseenter"in ot||(it={mouseenter:"mouseover",mouseleave:"mouseout"})}var at={svg:"http://www.w3.org/2000/svg",xhtml:"http://www.w3.org/1999/xhtml",xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"},ut="$";k.prototype={appendChild:function(t){return this._parent.insertBefore(t,this._next)},insertBefore:function(t,e){return this._parent.insertBefore(t,e||this._next)}};var st=function(t){return function(){return this.matches(t)}};if("undefined"!=typeof document){var ct=document.documentElement;if(!ct.matches){var lt=ct.webkitMatchesSelector||ct.msMatchesSelector||ct.mozMatchesSelector||ct.oMatchesSelector;st=function(t){return function(){return lt.call(this,t)}}}}W.prototype=F.prototype={select:K,selectAll:U,filter:H,data:Y,enter:O,exit:I,order:q,sort:B,call:P,nodes:L,node:N,size:M,empty:C,each:E,attr:S,style:b,property:x,"class":v,classed:v,text:m,html:g,append:_,insert:_,remove:h,datum:l,event:n,on:n,dispatch:s};var ht="undefined"!=typeof navigator&&/WebKit/.test(navigator.userAgent)?-1:0,ft="0.4.12";t.version=ft,t.mouse=Z,t.namespace=f,t.namespaces=at,t.requote=e,t.select=J,t.selectAll=tt,t.selection=F,t.touch=et,t.touches=nt}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3-selection",["exports"],e):e(t.d3_selection={})}(this,function(t){"use strict";function e(t){return t.replace(rt,"\\$&")}function n(t,n,a){function u(){for(var e=p,o=arguments.length>>1,u=new Array(o);--o>=0;)e=e[arguments[(o<<1)+1]],u[o]=o?e._parent:e;var c=r(n,u,arguments);l&&(c=i(c)),s.call(this),this.addEventListener(t,this[f]=c,c._capture=a),c._listener=n}function s(){var e=this[f];e&&(this.removeEventListener(t,e,e._capture),delete this[f])}function c(){var n,r=new RegExp("^__on([^.]+)"+e(t)+"$");for(var i in this)if(n=i.match(r)){var o=this[i];this.removeEventListener(n[1],o,o._capture),delete this[i]}}var l,h=arguments.length,f="__on"+t,p=this._root;return 2>h?(h=this.node()[f])&&h._listener:(3>h&&(a=!1),(h=t.indexOf("."))>0&&(t=t.slice(0,h)),(l=it.hasOwnProperty(t))&&(t=it[t]),this.each(n?h?u:o:h?s:c))}function r(e,n,r){return function(i){for(var o=n.length,a=t.event;--o>=0;)r[o<<1]=n[o].__data__;t.event=i;try{e.apply(n[0],r)}finally{t.event=a}}}function i(t){return function(e){var n=e.relatedTarget;n&&(n===this||8&n.compareDocumentPosition(this))||t(e)}}function o(){}function a(){for(var e,n=t.event;e=n.sourceEvent;)n=e;return n}function u(t){return t&&(t.ownerDocument&&t.ownerDocument.defaultView||t.document&&t||t.defaultView)}function s(t,e){function n(){return c(this,t,e)}function r(){return c(this,t,e.apply(this,arguments))}return this.each("function"==typeof e?r:n)}function c(t,e,n){var r=u(t),i=r.CustomEvent;i?i=new i(e,n):(i=r.document.createEvent("Event"),n?(i.initEvent(e,n.bubbles,n.cancelable),i.detail=n.detail):i.initEvent(e,!1,!1)),t.dispatchEvent(i)}function l(t){return arguments.length?this.property("__data__",t):this.node().__data__}function h(){return this.each(function(){var t=this.parentNode;t&&t.removeChild(this)})}function f(t){var e=t.indexOf(":"),n=t;return e>=0&&"xmlns"!==(n=t.slice(0,e))&&(t=t.slice(e+1)),at.hasOwnProperty(n)?{space:at[n],local:t}:t}function p(t){return function(){return this.querySelector(t)}}function _(t,e){function n(){return this.appendChild(t.apply(this,arguments))}function r(){return this.insertBefore(t.apply(this,arguments),e.apply(this,arguments)||null)}return"function"!=typeof t&&(t=d(t)),this.select(arguments.length<2?n:("function"!=typeof e&&(e=p(e)),r))}function d(t){function e(){var e=this.ownerDocument,n=this.namespaceURI;return n?e.createElementNS(n,t):e.createElement(t)}function n(){return this.ownerDocument.createElementNS(t.space,t.local)}return t=f(t),t.local?n:e}function g(t){function e(){this.innerHTML=t}function n(){var e=t.apply(this,arguments);this.innerHTML=null==e?"":e}return arguments.length?(null==t&&(t=""),this.each("function"==typeof t?n:e)):this.node().innerHTML}function m(t){function e(){this.textContent=t}function n(){var e=t.apply(this,arguments);this.textContent=null==e?"":e}return arguments.length?(null==t&&(t=""),this.each("function"==typeof t?n:e)):this.node().textContent}function v(t,e){function n(){for(var n=-1;++n<i;)t[n](this,e)}function r(){for(var n=-1,r=e.apply(this,arguments);++n<i;)t[n](this,r)}t=(t+"").trim().split(/^|\s+/);var i=t.length;if(arguments.length<2){var o=this.node(),a=-1;if(e=o.classList){for(;++a<i;)if(!e.contains(t[a]))return!1}else for(e=o.getAttribute("class");++a<i;)if(!A(t[a]).test(e))return!1;return!0}return t=t.map(y),this.each("function"==typeof e?r:n)}function y(t){var e;return function(n,r){if(i=n.classList)return r?i.add(t):i.remove(t);e||(e=A(t));var i=n.getAttribute("class")||"";r?(e.lastIndex=0,e.test(i)||n.setAttribute("class",w(i+" "+t))):n.setAttribute("class",w(i.replace(e," ")))}}function w(t){return t.trim().replace(/\s+/g," ")}function A(t){return new RegExp("(?:^|\\s+)"+e(t)+"(?:\\s+|$)","g")}function x(t,e){function n(){delete this[t]}function r(){this[t]=e}function i(){var n=e.apply(this,arguments);null==n?delete this[t]:this[t]=n}return arguments.length<2?this.node()[t]:this.each(null==e?n:"function"==typeof e?i:r)}function b(t,e,n){function r(){this.style.removeProperty(t)}function i(){this.style.setProperty(t,e,n)}function o(){var r=e.apply(this,arguments);null==r?this.style.removeProperty(t):this.style.setProperty(t,r,n)}var a=arguments.length;return 2>a?u(a=this.node()).getComputedStyle(a,null).getPropertyValue(t):(3>a&&(n=""),this.each(null==e?r:"function"==typeof e?o:i))}function S(t,e){function n(){this.removeAttribute(t)}function r(){this.removeAttributeNS(t.space,t.local)}function i(){this.setAttribute(t,e)}function o(){this.setAttributeNS(t.space,t.local,e)}function a(){var n=e.apply(this,arguments);null==n?this.removeAttribute(t):this.setAttribute(t,n)}function u(){var n=e.apply(this,arguments);null==n?this.removeAttributeNS(t.space,t.local):this.setAttributeNS(t.space,t.local,n)}if(t=f(t),arguments.length<2){var s=this.node();return t.local?s.getAttributeNS(t.space,t.local):s.getAttribute(t)}return this.each(null==e?t.local?r:n:"function"==typeof e?t.local?u:a:t.local?o:i)}function E(t){function e(n,i){var o,a=-1,u=n.length;if(--i)for(var s=2*i,c=s+1;++a<u;)(o=n[a])&&(r[s]=o._parent.__data__,r[c]=a,e(o,i));else for(;++a<u;)(o=n[a])&&(r[0]=o.__data__,r[1]=a,t.apply(o,r))}var n=this._depth,r=new Array(n);return e(this._root,n),this}function C(){return!this.node()}function M(){var t=0;return this.each(function(){++t}),t}function N(){return T(this._root,this._depth)}function T(t,e){var n,r=-1,i=t.length;if(--e){for(;++r<i;)if((n=t[r])&&(n=T(n,e)))return n}else for(;++r<i;)if(n=t[r])return n}function L(){var t=new Array(this.size()),e=-1;return this.each(function(){t[++e]=this}),t}function P(){var t=arguments[0];return t.apply(arguments[0]=this,arguments),this}function D(t){return t._root=V(t._root,t._depth)}function V(t,e){var n,r=-1,i=t.length;if(--e)for(;++r<i;)(n=t[r])&&(t[r]=V(n,e));else if(!Array.isArray(t)){for(var o=new Array(i);++r<i;)o[r]=t[r];o._parent=t._parent,t=o}return t}function B(t){function e(e,n){return e&&n?t(e.__data__,n.__data__):!e-!n}function n(t,r){if(--r)for(var i,o=-1,a=t.length;++o<a;)(i=t[o])&&n(i,r);else t.sort(e)}return t||(t=R),n(D(this),this._depth),this.order()}function R(t,e){return e>t?-1:t>e?1:t>=e?0:NaN}function q(){return X(this._root,this._depth),this}function X(t,e){var n,r,i=t.length;if(--e)for(;--i>=0;)(n=t[i])&&X(n,e);else for(r=t[--i];--i>=0;)(n=t[i])&&(r&&r!==n.nextSibling&&r.parentNode.insertBefore(n,r),r=n)}function $(t){return new W(z(D(t),t._depth),t._depth)}function z(t,e){var n,r=-1,i=t.length,o=new Array(i);if(--e)for(;++r<i;)(n=t[r])&&(o[r]=z(n,e));return o._parent=t._parent,o}function I(){return this._exit||(this._exit=$(this))}function O(){return this._enter||(this._enter=$(this),this._enter._update=this),this._enter}function Y(t){return function(){return t}}function k(t,e){function n(e,r,i,o){var a,u,l=-1;if(o--){var h=2*o,f=h+1;for(a=e.length;++l<a;)(u=e[l])&&(s[h]=u._parent.__data__,s[f]=l,n(u,r[l],i[l],o))}else{var p,_=0;for(c(e,r,i,t.apply(e._parent,s)),a=e.length;++l<a;)if(p=r[l]){for(l>=_&&(_=l+1);!(u=e[_])&&++_<a;);p._next=u||null}}}function r(t,e,n,r){var i,o=0,a=t.length,u=r.length,s=Math.min(a,u);for(e.length=0,e.length=u,n.length=0,n.length=a;s>o;++o)(i=t[o])?i.__data__=r[o]:e[o]=new G(t._parent,r[o]);for(;u>o;++o)e[o]=new G(t._parent,r[o]);for(;a>o;++o)(i=t[o])&&(n[o]=t[o]);t.length=u}function i(t,n,r,i){var o,a,u,c=i.length,l=t.length,h={},f=new Array(2).concat(s),p=new Array(l);for(n.length=0,n.length=c,r.length=0,r.length=l,o=0;l>o;++o)(a=t[o])&&(f[0]=a.__data__,f[1]=o,p[o]=u=ut+e.apply(a,f),h[u]?r[o]=a:h[u]=a);for(t.length=0,t.length=c,o=0;c>o;++o)f[0]=i[o],f[1]=o,u=ut+e.apply(t._parent,f),(a=h[u])?a!==!0&&(t[o]=a,a.__data__=i[o]):n[o]=new G(t._parent,i[o]),h[u]=!0;for(o=0;l>o;++o)(a=h[p[o]])!==!0&&(r[o]=a)}if(!t){var o=new Array(this.size()),a=-1;return this.each(function(t){o[++a]=t}),o}var u=this._depth-1,s=new Array(2*u),c=e?i:r,l=this.enter(),h=this.exit();return"function"!=typeof t&&(t=Y(t)),n(this._root,l._root,h._root,u),this}function G(t,e){this.ownerDocument=t.ownerDocument,this.namespaceURI=t.namespaceURI,this._next=null,this._parent=t,this.__data__=e}function H(t){function e(n,i){var o,a,u=-1,s=n.length;if(--i){var c=2*i,l=c+1;for(a=new Array(s);++u<s;)(o=n[u])&&(r[c]=o._parent.__data__,r[l]=u,a[u]=e(o,i))}else for(a=[];++u<s;)(o=n[u])&&(r[0]=o.__data__,r[1]=u,t.apply(o,r)&&a.push(o));return a._parent=n._parent,a}var n=this._depth,r=new Array(2*n);return"function"!=typeof t&&(t=st(t)),new W(e(this._root,n),n)}function U(t){function e(n,i){var o,a,u=-1,s=n.length,c=new Array(s);if(--i)for(var l=2*i,h=l+1;++u<s;)(o=n[u])&&(r[l]=o._parent.__data__,r[h]=u,c[u]=e(o,i));else for(;++u<s;)(o=n[u])&&(r[0]=o.__data__,r[1]=u,c[u]=a=t.apply(o,r),a._parent=o);return c._parent=n._parent,c}var n=this._depth,r=new Array(2*n);return"function"!=typeof t&&(t=j(t)),new W(e(this._root,n),n+1)}function j(t){return function(){return this.querySelectorAll(t)}}function K(t){function e(n,i,o){var a,u,s=-1,c=n.length,l=new Array(c);if(--o)for(var h=2*o,f=h+1;++s<c;)(a=n[s])&&(r[h]=a._parent.__data__,r[f]=s,l[s]=e(a,i&&i[s],o));else for(;++s<c;)(a=n[s])&&(r[0]=a.__data__,r[1]=s,(u=t.apply(a,r))&&("__data__"in a&&(u.__data__=a.__data__),i&&(i[s]=u,delete n[s]),l[s]=u));return l._parent=n._parent,l}var n=this._depth,r=new Array(2*n);return"function"!=typeof t&&(t=p(t)),new W(e(this._root,this._update&&this._update._root,n),n)}function W(t,e){this._root=t,this._depth=e,this._enter=this._update=this._exit=null}function F(){return new W([document.documentElement],1)}function J(t){return new W(["string"==typeof t?document.querySelector(t):t],1)}function Q(t,e){var n=t.ownerSVGElement||t;if(n.createSVGPoint){var r=n.createSVGPoint();if(0>ht){var i=defaultView(t);if(i.scrollX||i.scrollY){n=J(i.document.body).append("svg").style({position:"absolute",top:0,left:0,margin:0,padding:0,border:"none"},"important");var o=n.node().getScreenCTM();ht=!(o.f||o.e),n.remove()}}return ht?(r.x=e.pageX,r.y=e.pageY):(r.x=e.clientX,r.y=e.clientY),r=r.matrixTransform(t.getScreenCTM().inverse()),[r.x,r.y]}var a=t.getBoundingClientRect();return[e.clientX-a.left-t.clientLeft,e.clientY-a.top-t.clientTop]}function Z(t,e){return arguments.length<2&&(e=a()),e.changedTouches&&(e=e.changedTouches[0]),Q(t,e)}function tt(t){return new W("string"==typeof t?document.querySelectorAll(t):t,1)}function et(t,e,n){arguments.length<3&&(n=e,e=a().changedTouches);for(var r,i=0,o=e?e.length:0;o>i;++i)if((r=e[i]).identifier===n)return Q(t,r);return null}function nt(t,e){arguments.length<2&&(e=a().touches);for(var n=0,r=e?e.length:0,i=new Array(r);r>n;++n)i[n]=Q(t,e[n]);return i}var rt=/[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g,it={};if(t.event=null,"undefined"!=typeof document){var ot=document.documentElement;"onmouseenter"in ot||(it={mouseenter:"mouseover",mouseleave:"mouseout"})}var at={svg:"http://www.w3.org/2000/svg",xhtml:"http://www.w3.org/1999/xhtml",xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"},ut="$";G.prototype={appendChild:function(t){return this._parent.insertBefore(t,this._next)},insertBefore:function(t,e){return this._parent.insertBefore(t,e||this._next)}};var st=function(t){return function(){return this.matches(t)}};if("undefined"!=typeof document){var ct=document.documentElement;if(!ct.matches){var lt=ct.webkitMatchesSelector||ct.msMatchesSelector||ct.mozMatchesSelector||ct.oMatchesSelector;st=function(t){return function(){return lt.call(this,t)}}}}W.prototype=F.prototype={select:K,selectAll:U,filter:H,data:k,enter:O,exit:I,order:q,sort:B,call:P,nodes:L,node:N,size:M,empty:C,each:E,attr:S,style:b,property:x,classed:v,text:m,html:g,append:_,remove:h,datum:l,on:n,dispatch:s};var ht="undefined"!=typeof navigator&&/WebKit/.test(navigator.userAgent)?-1:0,ft="0.5.0";t.version=ft,t.mouse=Z,t.namespace=f,t.namespaces=at,t.requote=e,t.select=J,t.selectAll=tt,t.selection=F,t.touch=et,t.touches=nt}); |
@@ -10,2 +10,2 @@ export {default as mouse} from "./src/mouse"; | ||
| export {default as touches} from "./src/touches"; | ||
| export {event} from "./src/selection-event" | ||
| export {event} from "./src/selection-on" |
| { | ||
| "name": "d3-selection", | ||
| "version": "0.4.12", | ||
| "version": "0.5.0", | ||
| "description": "Data-driven DOM manipulation: select elements and join them to data.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
478
README.md
| # d3-selection | ||
| This module implements the core concept of D3: manipulating the DOM by selecting elements and joining to data. This code is currently EXPERIMENTAL and represents the in-development D3 4.0 API. The 4.0 API is largely backwards-compatible, but differs from 3.x in several ways: | ||
| Selections allow powerful data-driven transformation of the document object model (DOM): set [attributes](#selection_attr), [styles](#selection_style), [properties](#selection_property), [HTML](#selection_html) or [text](#selection_text) content, and more. Using the [data join](#data)’s [enter](#selection_enter) and [exit](#selection_enter) selections, you can also [add](#selection_append) or [remove](#selection_remove) elements to correspond to data. | ||
| * The implementation is now organized into ES6 modules, rather than the ad hoc concatentation used previously. A [UMD](https://github.com/umdjs/umd) build is provided using [Esperanto](http://esperantojs.org/), but feel free to roll your own. | ||
| ## Installing | ||
| * The Selection class now extends Object, rather than Array. This obviates the need for [prototype injection](http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/#wrappers_prototype_chain_injection) and [direct property injection](http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/#wrappers_direct_property_injection). Selections are now hierarchical, rather than having fixed two-level nesting. Accessor functions such as those accepted by selection.attr and selection.style can now refer to [parent data](http://bl.ocks.org/mbostock/7a8a2de2b99d391add4b) and indexes if desired. | ||
| If you use NPM, `npm install d3-selection`. Otherwise, download the [latest release](https://github.com/d3/d3-selection/releases/latest). The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom build using [Rollup](https://github.com/rollup/rollup) or your preferred bundler. You can also load directly from [d3js.org](https://d3js.org): | ||
| * The selection.data method (when called with arguments) now modifies the current selection to be the update selection, rather than returning a new selection. The enter and exit selections are now empty prior to a data-join, rather than non-existant. The selection.data method (when called *without* arguments) now returns an array of data for *all* selected elements, not just the first group. | ||
| ```html | ||
| <script src="https://d3js.org/d3-selection.v0.5.min.js"></script> | ||
| ``` | ||
| * Enter selections no longer have a special subclass, and thus support all selection methods. | ||
| In a vanilla environment, a `d3_selection` global is exported. [Try d3-selection in your browser.](https://tonicdev.com/npm/d3-selection) | ||
| * A new selection.nodes method returns an array of all selected elements. | ||
| ## API Reference | ||
| * The selection.append method now takes an optional *before* selector and replaces selection.insert. The selection.insert method is now deprecated. The selection.append method now inserts entering elements in data order by default when joining by key. (This assumes that new data is in the same order as old data; if not, use selection.order.) The selection.append method now moves, rather than copies, entering elements to the update selection. | ||
| * [Selection](#selection) | ||
| * [Transformation](#transformation) | ||
| * [Data](#data) | ||
| * [Events](#events) | ||
| * [Control](#control) | ||
| * [Namespaces](#namespaces) | ||
| * The selection.classed method has been renamed selection.class. The old name is deprecated but preserved for backwards-compatibility. | ||
| ### Selection | ||
| * The selection.on method has been renamed selection.event. The old name is deprecated but preserved for backwards-compatibility. | ||
| Selection methods accept [W3C selector strings](http://www.w3.org/TR/selectors-api/) such as `.foo` to select elements with the class *foo*, or `div` to select DIV elements. Selection methods come in two forms: select and selectAll: the former selects only the first matching element, while the latter selects all matching elements in traversal order. The top-level selection methods, [d3.select](#select) and [d3.selectAll](#selectAll), query the entire document; the subselection methods, in contrast, [*selection*.select](#selection_select) and [*selection*.selectAll](#selection_selectAll), restrict selection to descendants of the selected elements. | ||
| * A new selection.dispatch method dispatches a [custom event](https://dom.spec.whatwg.org/#interface-customevent) of the specified type to all selected elements. Think of it like jQuery’s trigger. | ||
| <a name="selection" href="#selection">#</a> d3.<b>selection</b>() | ||
| * [Multi-value map](http://bl.ocks.org/mbostock/3305515) variants of selection.attr, selection.style, selection.property, selection.class and selection.on are now implemented as distinct methods in the [d3-selection-multi plugin](https://github.com/d3/d3-selection-multi), rather than overloading the arguments. See [#2109](https://github.com/mbostock/d3/issues/2109). | ||
| [Selects](#select) the root element, `document.documentElement`. This function can also be used to check if an object is a selection (`instanceof selection`) or to extend the selection prototype. For example, to add a method to check or uncheck input checkboxes: | ||
| * The d3.ns.prefix namespace map has been renamed to d3.namespaces. | ||
| ```js | ||
| d3.selection.prototype.checked = function(value) { | ||
| return arguments.length < 1 | ||
| ? this.property("checked") | ||
| : this.property("checked", !!value); | ||
| }; | ||
| ``` | ||
| * The d3.ns.qualify method has been renamed to d3.namespace. | ||
| And then to check all checkboxes: | ||
| * Sizzle is no longer supported. It’s time. | ||
| ```js | ||
| d3.selectAll("input[type=checkbox]").checked(true); | ||
| ``` | ||
| <a name="select" href="#select">#</a> d3.<b>select</b>(<i>selector</i>) | ||
| Selects the first element that matches the specified *selector*. If no elements match the *selector*, returns an empty selection. If multiple elements match the *selector*, only the first matching element (in traversal order) will be selected. For example, to select the first anchor element: | ||
| ```js | ||
| var anchor = d3.select("a"); | ||
| ``` | ||
| If the *selector* is not a string, instead selects the specified node; this is useful if you already have a reference to a node, such as `this` within an event listener or a global such as `document.body`. For example, to make the text of any clicked paragraph red: | ||
| ```js | ||
| d3.selectAll("p").on("click", function() { | ||
| d3.select(this).style("color", "red"); | ||
| }); | ||
| ``` | ||
| <a name="selectAll" href="#selectAll">#</a> d3.<b>selectAll</b>(<i>selector</i>) | ||
| Selects all elements that match the specified *selector*. The elements will be selected in traversal order (top-to-bottom). If no elements in the document match the *selector*, returns an empty selection. For example, to select all paragraphs: | ||
| ```js | ||
| var paragraph = d3.selectAll("p"); | ||
| ``` | ||
| If the *selector* is not a string, instead selects the specified array of nodes; this is useful if you already have a reference to nodes, such as `this.childNodes` within an event listener or a global such as `document.links`. The nodes may instead be a pseudo-array such as a `NodeList` or `arguments`. For example, to color all links red: | ||
| ```js | ||
| d3.selectAll(document.links).style("color", "red"); | ||
| ``` | ||
| <a name="selection_select" href="#selection_select">#</a> <i>selection</i>.<b>select</b>(<i>selector</i>) | ||
| For each selected element, selects the first descendant element that matches the specified *selector*. If no element matches the specified selector for the current element, the element at the current index will be null in the returned selection, preserving the index of the existing selection. (Operators automatically skip null elements.) If the current element has associated data, this data is propagated to the newly selected elements. If multiple elements match the selector, only the first matching element (in traversal order) is selected. For example, to select the first bold element in every paragraph: | ||
| ```js | ||
| var b = d3.selectAll("p").select("b"); | ||
| ``` | ||
| If the *selector* is a function, it will be invoked in the same manner as other operator functions, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. It must then return an element, or null if there is no matching element. For example, to select the previous sibling of each paragraph: | ||
| ```js | ||
| var previous = d3.selectAll("p").select(function() { | ||
| return this.previousElementSibling; | ||
| }); | ||
| ``` | ||
| Unlike [*selection*.selectAll](#selection_selectAll), *selection*.select does not affect grouping: it preserves the existing grouping and propagates parent data (if any) to selected children. Grouping plays an important role in the [data join](#data). See [Nested Selections](http://bost.ocks.org/mike/nest/) for more on this topic. | ||
| <a name="selection_selectAll" href="#selection_selectAll">#</a> <i>selection</i>.<b>selectAll</b>(<i>selector</i>) | ||
| For each selected element, selects all descendant elements that match the specified *selector*. The returned selection is grouped by its parent node in the current selection. If no element matches the specified selector for the current element, the group at the current index will be empty in the returned selection. The subselection does not inherit data from the current selection; use [*selection*.data](#selection_data) to propagate data to children. For example, to select the bold elements in every paragraph: | ||
| ```js | ||
| var b = d3.selectAll("p").selectAll("b"); | ||
| ``` | ||
| If the *selector* is a function, it will be invoked in the same manner as other operator functions, being passed the current datum `d` and index `i`, with the `this` context as the current DOM element. It must then return an array of elements (or a psuedo-array, such as a NodeList), or the empty array if there are no matching elements. For example, to select the previous and next siblings of each paragraph: | ||
| ```js | ||
| var sibling = d3.selectAll("p").selectAll(function() { | ||
| return [ | ||
| this.previousElementSibling, | ||
| this.nextElementSibling | ||
| ]; | ||
| }); | ||
| ``` | ||
| Unlike [*selection*.select](#selection_select), *selection*.selectAll does affect grouping: each selected descendant is grouped by the parent element in the originating selection. Grouping plays an important role in the [data join](#data). See [Nested Selections](http://bost.ocks.org/mike/nest/) for more on this topic. | ||
| ### Transformation | ||
| Selections expose a variety of operators to affect document content. Selection operators return the current selection, affording method chaining to apply multiple operators on a given selection concisely. For example, to see the name attribute and color style of an anchor element: | ||
| ```js | ||
| d3.select("a") | ||
| .attr("name", "fred") | ||
| .style("color", "red"); | ||
| ``` | ||
| This is equivalent to: | ||
| ```js | ||
| var anchor = d3.select("a"); | ||
| anchor.attr("name", "fred"); | ||
| anchor.style("color", "red"); | ||
| ``` | ||
| To learn selections experientially, try selecting elements by writing code into your browser’s developer console! (In Chrome, open the console with ⌥⌘J.) Inspect the returned selection to see which elements are selected and how they are grouped. Apply operators to the selection and see how the page content changes. | ||
| <a name="selection_attr" href="#selection_attr">#</a> <i>selection</i>.<b>attr</b>(<i>name</i>[, <i>value</i>]) | ||
| If a *value* is specified, sets the attribute with the specified *name* to the specified value on the selected elements and returns this selection. If the *value* is a constant, then all elements are given the same attribute value; otherwise, if the *value* is a function, the function is evaluated for each selected element (in order), being passed the current datum *d* and the current index *i*, with the `this` context as the current DOM element. The function’s return value is then used to set each element’s attribute. A null value will remove the specified attribute. | ||
| If a *value* is not specified, returns the current value of the specified attribute for the first (non-null) element in the selection. This is generally useful only if you know that the selection contains exactly one element. | ||
| The specified *name* may have a namespace prefix, such as `xlink:href` to specify the `href` attribute in the XLink namespace. See [namespaces](#namespaces) for the map of supported namespaces; additional namespaces can be registered by adding to the map. | ||
| <a name="selection_classed" href="#selection_classed">#</a> <i>selection</i>.<b>classed</b>(<i>classes</i>[, <i>value</i>]) | ||
| If a *value* is specified, assigns or unassigns the specified CSS *classes* on the selected elements by setting the `class` attribute or modifying the `classList` property and returns this selection. The specified *classes* is a string of space-separated class names. For example, to assign the classes `foo` and `bar` to the selected elements: | ||
| ```js | ||
| selection.classed("foo bar", true); | ||
| ``` | ||
| If the *value* is truthy, then all elements are assigned the specified *classes*; otherwise, the classes are unassigned. If the *value* is a function, then the function is evaluated for each selected element (in order), being passed the current datum *d* and the current index *i*, with the `this` context as the current DOM element. The function’s return value is then used to assign or unassign classes on each element. For example, to randomly associate the class *foo* with on average half the selected elements: | ||
| ```js | ||
| selection.classed("foo", function() { return Math.random(); }); | ||
| ``` | ||
| If a *value* is not specified, returns true if and only if the first (non-null) selected element has the specified *classes*. This is generally useful only if you know the selection contains exactly one element. | ||
| <a name="selection_style" href="#selection_style">#</a> <i>selection</i>.<b>style</b>(<i>name</i>[, <i>value</i>[, <i>priority</i>]]) | ||
| If a *value* is specified, sets the style property with the specified *name* to the specified value on the selected elements and returns this selection. If the *value* is a constant, then all elements are given the same style property value; otherwise, if the *value* is a function, then the function is evaluated for each selected element (in order), being passed the current datum *d* and the current index *i*, with the `this` context as the current DOM element. The function’s return value is then used to set each element’s style property. A null value will remove the style property. An optional *priority* may also be specified, either as null or the string `important` (without the exclamation point). | ||
| If a *value* is not specified, returns the current computed value of the specified style property for the first (non-null) element in the selection. This is generally useful only if you know the selection contains exactly one element. The computed value **may be different than the previously-set value**, particularly if it was set using a shorthand property (such as the `font` style, which is shorthand for `font-size`, `font-face`, etc.). | ||
| Caution: unlike many SVG attributes, CSS styles typically have associated units. For example, `3px` is a valid stroke-width property value, while `3` is not. Some browsers implicitly assign the `px` (pixel) unit to numeric values, but not all browsers do: IE, for example, throws an “invalid arguments” error! | ||
| <a name="selection_property" href="#selection_property">#</a> <i>selection</i>.<b>property</b>(<i>name</i>[, <i>value</i>]) | ||
| Some HTML elements have special properties that are not addressable using attributes or styles, such as a form field’s text `value` and a checkbox’s `checked` boolean. Use this operator to get or set these properties. | ||
| If a *value* is specified, sets the property with the specified *name* to the specified value on selected elements. If the *value* is a constant, then all elements are given the same property value; otherwise, if the *value* is a function, then the function is evaluated for each selected element (in order), being passed the current datum *d* and the current index *i*, with the `this` context as the current DOM element. The function’s return value is then used to set each element’s property. A null value will delete the specified property. | ||
| If a *value* is not specified, returns the value of the specified property for the first (non-null) element in the selection. This is generally useful only if you know the selection contains exactly one element. | ||
| <a name="selection_text" href="#selection_text">#</a> <i>selection</i>.<b>text</b>([<i>value</i>]) | ||
| The text operator is based on the [textContent](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-textContent "http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-textContent") property; setting the text content will replace any existing child elements. | ||
| If a *value* is specified, sets the text content to the specified value on all selected elements. If the *value* is a constant, then all elements are given the same text content; otherwise, if the *value* is a function, then the function is evaluated for each selected element (in order), being passed the current datum *d* and the current index *i*, with the `this` context as the current DOM element. The function’s return value is then used to set each element’s text content. A null value will clear the content. | ||
| If a *value* is not specified, returns the text content for the first (non-null) element in the selection. This is generally useful only if you know the selection contains exactly one element. | ||
| <a name="selection_html" href="#selection_html">#</a> <i>selection</i>.<b>html</b>([<i>value</i>]) | ||
| The html operator is based on the [innerHTML](http://dev.w3.org/html5/spec-LC/apis-in-html-documents.html#innerhtml "http://dev.w3.org/html5/spec-LC/apis-in-html-documents.html#innerhtml") property; setting the inner HTML will replace any existing child elements. Also, you may prefer to use [*selection*.append](#selection_append) to create HTML content in a data-driven way; this operator is intended for when you want a little bit of HTML, say for rich formatting. | ||
| If a *value* is specified, sets the inner HTML to the specified value on all selected elements. If the *value* is a constant, then all elements are given the same inner HTML; otherwise, if the *value* is a function, then the function is evaluated for each selected element (in order), being passed the current datum *d* and the current index *i*, with the `this` context as the current DOM element. The function’s return value is then used to set each element’s inner HTML. A null value will clear the content. | ||
| If a *value* is not specified, returns the inner HTML for the first (non-null) element in the selection. This is generally useful only if you know the selection contains exactly one element. | ||
| As the name suggests, *selection*.html is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with *selection*.html. Consider using [XMLSerializer](https://developer.mozilla.org/en-US/docs/XMLSerializer) to convert a DOM subtree to text. See also the [innersvg polyfill](https://code.google.com/p/innersvg/), which provides a shim to support the innerHTML property on SVG elements. | ||
| <a name="selection_append" href="#selection_append">#</a> <i>selection</i>.<b>append</b>(<i>type</i>[, <i>before</i>]) | ||
| If the specified *type* is a string, appends a new element of this type (tag name) as the last child of each element in the current selection. Otherwise, the *type* may be a function which is evaluated for each selected element (in order), being passed the current datum *d* and the current index *i*, with the `this` context as the current DOM element. This function should return an element to be appended. (Typically, the function creates a new element, but it may return an existing element instead.) For example, to append a DIV element to each paragraph: | ||
| ```js | ||
| d3.selectAll("p").append("div"); | ||
| ``` | ||
| This is equivalent to: | ||
| ```js | ||
| d3.selectAll("p").append(function() { | ||
| return document.createElement("DIV"); | ||
| }); | ||
| ``` | ||
| In both cases, this method returns a new selection containing the appended elements. Each new element inherits the data of the current elements, if any, in the same manner as [*selection*.select](#selection_select). | ||
| An optional *before* selector string or function may be specified. For instance, the selector `:first-child` will prepend nodes before the first child, rather than after the last child. If no *before* selector is specified on an [enter selection](#selection_enter), then entering elements are inserted immediately before the next following sibling in the update selection, if any. This allows you to insert elements into the DOM in an order consistent with bound data. Note, however, the slower [*selection*.order](#selection_order) may still be required if updating elements change order. | ||
| The specified *name* may have a namespace prefix, such as `svg:text` to specify a `text` attribute in the SVG namespace. See [namespaces](#namespaces) for the map of supported namespaces; additional namespaces can be registered by adding to the map. If no namespace is specified, the namespace will be inherited from the parent element; or, if the name is one of the known prefixes, the corresponding namespace will be used (for example, `svg` implies `svg:svg`). | ||
| <a name="selection_remove" href="#selection_remove">#</a> <i>selection</i>.<b>remove</b>() | ||
| Removes the selected elements from the document. Returns this selection (the removed elements) which are now detached from the DOM. Note that there is not currently a dedicated API to add removed elements back to the document; however, you can pass a function to [*selection*.append](#selection_append) to re-add elements. | ||
| ### Data | ||
| For an introduction to D3’s data joins, see [Thinking With Joins](http://bost.ocks.org/mike/join/). Also see the [General Update Pattern](http://bl.ocks.org/mbostock/3808218) example thread. | ||
| <a name="selection_data" href="#selection_data">#</a> <i>selection</i>.<b>data</b>([<i>data</i>[, <i>key</i>]]) | ||
| Joins the specified array of *data* with the selected elements, modifying this selection so that it represents the *update* selection: the elements successfully bound to data. Also defines the [enter](#selection_enter) and [exit](#selection_exit) selections, which can be used to add or remove elements to correspond to the new data. The specified *data* is an array of arbitrary values (*e.g.*, numbers or objects), or a function that returns an array of values for each group. When data is assigned to an element, it is stored in the property `__data__`, thus making the data “sticky” and available on re-selection. | ||
| The *data* is specified **for each group** in the selection. If the selection has multiple groups (such as [d3.selectAll](#selectAll) followed by [*selection*.selectAll](#selection_selectAll)), then *data* should typically be specified as a function. This function will be invoked for each group, being passed the parent datum *d* (which may be undefined) and the group index *i*, with the parent element as the `this` context. For example, to create an HTML table from a matrix of numbers: | ||
| ```js | ||
| var matrix = [ | ||
| [11975, 5871, 8916, 2868], | ||
| [ 1951, 10048, 2060, 6171], | ||
| [ 8010, 16145, 8090, 8045], | ||
| [ 1013, 990, 940, 6907] | ||
| ]; | ||
| var tr = d3.select("body").append("table") | ||
| .selectAll("tr") | ||
| .data(matrix) | ||
| .enter().append("tr"); | ||
| var td = tr.selectAll("td") | ||
| .data(function(d) { return d; }) | ||
| .enter().append("td") | ||
| .text(function(d) { return d; }); | ||
| ``` | ||
| The *data* function here is the identity function: it is invoked for each table row, and returns the numbers for each table cell. | ||
| If a *key* is not specified, then the first datum in *data* is assigned to the first selected element, the second datum to the second selected element, and so on. A *key* function may be specified to control how data is assigned to elements, replacing the default join-by-index. This key function is evaluated for each selected element (in order), being passed the current datum *d* and the current index *i*, with the `this` context as the current DOM element. The key function is also evaluated for each new datum in *data*, being passed the datum `d`, the index `i`, with the `this` context as the parent DOM element. The datum for a given key is assigned to the element with the matching key. For example, given this document: | ||
| ```html | ||
| <div id="Locke"></div> | ||
| <div id="Reyes"></div> | ||
| <div id="Ford"></div> | ||
| <div id="Jarrah"></div> | ||
| <div id="Shephard"></div> | ||
| <div id="Kwon"></div> | ||
| ``` | ||
| You could join data by key as follows: | ||
| ```js | ||
| var data = [ | ||
| {name: "Locke", number: 4}, | ||
| {name: "Reyes", number: 8}, | ||
| {name: "Ford", number: 15}, | ||
| {name: "Jarrah", number: 16}, | ||
| {name: "Shephard", number: 31}, | ||
| {name: "Kwon", number: 34} | ||
| ]; | ||
| d3.selectAll("div") | ||
| .data(data, function(d) { return d ? d.name : this.id; }); | ||
| ``` | ||
| This key function uses the bound datum *d* if present, and otherwise falls back to the element’s id property. | ||
| The *update* and *enter* selections are returned in data order, while the *exit* selection is in document order (at the time that the selection was queried). If a key function is specified, the order of elements in this selection may change. However, the elements are not automatically reordered in the DOM; use [*selection*.order](#order) or [*selection*.sort](#sort) as needed. For a more detailed example of how the key function affects the data join, see the tutorial [A Bar Chart, Part 2](http://bost.ocks.org/mike/bar/2/). | ||
| If *data* is not specified, then this method returns the array of data the selected elements. | ||
| Note: this method cannot be used to clear previously-bound data; use [*selection*.datum](#selection_datum) instead. | ||
| <a name="selection_enter" href="#selection_enter">#</a> <i>selection</i>.<b>enter</b>() | ||
| Returns the enter selection: placeholder nodes for each datum for which there was no corresponding DOM element in the selection. The enter selection is always empty until the selection is joined to data by [*selection*.data](#selection_data). For example, to create new DIV elements corresponding to an array of numbers: | ||
| ```js | ||
| var div = d3.select("body").selectAll("div"); | ||
| div.data([4, 8, 15, 16, 23, 42]); | ||
| div.enter().append("div").text(function(d) { return d; }); | ||
| ``` | ||
| If the body is initially empty, the above code will create six new DIV elements, append them to the body in-order, and assign their text content as the associated (string-coerced) number: | ||
| ```html | ||
| <div>4</div> | ||
| <div>8</div> | ||
| <div>15</div> | ||
| <div>16</div> | ||
| <div>23</div> | ||
| <div>42</div> | ||
| ``` | ||
| The enter selection’s placeholders are conceptually pointers to the parent node (in this example, the document body), and the enter selection is typically only used transiently to append elements. | ||
| The enter selection **merges into the update selection** on [append](#selection_append). Rather than applying the same operators to the enter and update selections separately, apply them once to the update selection *after* entering nodes. For example: | ||
| ```js | ||
| var circle = svg.selectAll("circle"); | ||
| circle.data(data); | ||
| circle.attr(…); // applies to updating (old) elements only | ||
| circle.enter().append("circle").attr(…); // applies to entering (new) elements only | ||
| circle.attr(…); // applies to BOTH updating and entering elements | ||
| circle.exit().remove(); // removes exiting elements | ||
| ``` | ||
| <a name="selection_exit" href="#selection_exit">#</a> <i>selection</i>.<b>exit</b>() | ||
| Returns the exit selection: existing DOM elements for which no new datum was found. The exit selection is always empty until the selection is joined to data by [*selection*.data](#selection_data). For example, to update the DIV elements created above with a new array of numbers: | ||
| ```js | ||
| div.data([1, 2, 4, 8, 16, 32], function(d) { return d; }); | ||
| ``` | ||
| Since we specified a key function (the identity function), and the new data contains the numbers [4, 8, 16] which match existing elements, the update selection contains three DIV elements. We’ll leave those elements as-is. We can append new elements for [1, 2, 32] using the enter selection: | ||
| ```js | ||
| div.enter().append("div").text(function(d) { return d; }); | ||
| ``` | ||
| Likewise, to remove the exiting elements [15, 23, 42]: | ||
| ```js | ||
| div.exit().remove(); | ||
| ``` | ||
| Now the document body looks like this: | ||
| ```html | ||
| <div>1</div> | ||
| <div>2</div> | ||
| <div>4</div> | ||
| <div>8</div> | ||
| <div>16</div> | ||
| <div>32</div> | ||
| ``` | ||
| Note that the order of the DOM elements matches the order of the data. This is true because the old data’s order and the new data’s order were consistent. If the new data’s order is different, use [*selection*.order](#selection_order) to reorder the elements in the DOM. | ||
| <a name="selection_datum" href="#selection_datum">#</a> <i>selection</i>.<b>datum</b>() | ||
| Gets or sets the bound data for each selected element. Unlike the [*selection*.data](#selection_data) method, this method does not compute a join (and thus does not affect the enter and exit selections). | ||
| If a *value* is specified, sets the element’s bound data to the specified value on all selected elements. If the *value* is a constant, all elements are given the same data; otherwise, if the *value* is a function, then the function is evaluated for each selected element, being passed the previous datum `d` and the current index `i`, with the `this` context as the current DOM element. The function is then used to set each element’s data. A null value will delete the bound data. This operator has no effect on the index. | ||
| If a *value* is not specified, returns the bound datum for the first (non-null) element in the selection. This is generally useful only if you know the selection contains exactly one element. | ||
| This method is useful for accessing HTML5 [custom data attributes](http://www.w3.org/TR/html5/dom.html#custom-data-attribute). For example, given the following elements: | ||
| ```html | ||
| <ul id="list"> | ||
| <li data-username="shawnbot">Shawn Allen</li> | ||
| <li data-username="mbostock">Mike Bostock</li> | ||
| </ul> | ||
| ``` | ||
| You can expose the custom data attributes by setting each element’s data as the built-in [dataset](http://www.w3.org/TR/html5/dom.html#dom-dataset) property: | ||
| ```js | ||
| selection.datum(function() { return this.dataset; }) | ||
| ``` | ||
| <a name="selection_filter" href="#selection_filter">#</a> <i>selection</i>.<b>filter</b>(*selector*) | ||
| Filters the selection, returning a new selection that contains only the elements for which the specified *selector* is true. The *selector* may be specified either as a function or as a selector string, such as `.foo`. If a function, it is passed the current datum `d` and index `i`, with the `this` context as the current DOM element. Note that the returned selection *may not* preserve the index of the original selection in the returned selection, as some elements may be removed; you can use [*selection*.select](#selection_select) to preserve the index, if needed. | ||
| For example, to select every element with an odd index (relative to the zero-based index): | ||
| ```js | ||
| var odd = selection.select(function(d, i) { return i % 2 === 1 ? this : null; }); | ||
| ``` | ||
| Equivalently, using a filter function: | ||
| ```js | ||
| var odd = selection.filter(function(d, i) { return i % 2 === 1; }); | ||
| ``` | ||
| Or a filter selector (note that the `:nth-child` pseudo-class is a one-based index rather than a zero-based index): | ||
| ```js | ||
| var odd = selection.filter(":nth-child(even)"); | ||
| ``` | ||
| <a name="selection_sort" href="#selection_sort">#</a> <i>selection</i>.<b>sort</b>() | ||
| Sorts the selected elements according to the *comparator* function, and then re-inserts the document elements to match the resulting order. Returns this selection. | ||
| The comparator function, which defaults to [ascending](https://github.com/d3/d3-array#ascending), is passed two elements’ data *a* and *b* to compare. It should return either a negative, positive, or zero value. If negative, then *a* should be before *b*; if positive, then *a* should be after *b*; otherwise, *a* and *b* are considered equal and the order is arbitrary. | ||
| Note that sorting is not guaranteed to be stable; however, it is guaranteed to have the same behavior as your browser’s built-in [sort](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/sort "https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/sort") method on arrays. | ||
| <a name="selection_order" href="#selection_order">#</a> <i>selection</i>.<b>order</b>() | ||
| Re-inserts elements into the document such that the document order matches the selection order. This is equivalent to calling [*selection*.sort](#selection_sort) if the data is already sorted, but much faster. | ||
| ### Events | ||
| <a name="selection_on" href="#selection_on">#</a> <i>selection</i>.<b>on</b>() | ||
| … | ||
| <a name="selection_dispatch" href="#selection_dispatch">#</a> <i>selection</i>.<b>dispatch</b>() | ||
| … | ||
| <a name="event" href="#event">#</a> d3.<b>event</b> | ||
| … | ||
| <a name="mouse" href="#mouse">#</a> d3.<b>mouse</b>() | ||
| … | ||
| <a name="touch" href="#touch">#</a> d3.<b>touch</b>() | ||
| … | ||
| <a name="touches" href="#touches">#</a> d3.<b>touches</b>() | ||
| … | ||
| ### Control | ||
| For advanced usage, D3 has a few additional operators for custom control flow. | ||
| <a name="selection_each" href="#selection_each">#</a> <i>selection</i>.<b>each</b>() | ||
| … | ||
| <a name="selection_call" href="#selection_call">#</a> <i>selection</i>.<b>call</b>() | ||
| … | ||
| <a name="selection_empty" href="#selection_empty">#</a> <i>selection</i>.<b>empty</b>() | ||
| … | ||
| <a name="selection_nodes" href="#selection_nodes">#</a> <i>selection</i>.<b>nodes</b>() | ||
| … | ||
| <a name="selection_node" href="#selection_node">#</a> <i>selection</i>.<b>node</b>() | ||
| … | ||
| <a name="selection_size" href="#selection_size">#</a> <i>selection</i>.<b>size</b>() | ||
| … | ||
| ### Namespaces | ||
| … | ||
| <a name="namespace" href="#namespace">#</a> d3.<b>namespace</b>() | ||
| … | ||
| <a name="namespaces" href="#namespaces">#</a> d3.<b>namespaces</b>() | ||
| … | ||
| <a name="requote" href="#requote">#</a> d3.<b>requote</b>() | ||
| … |
@@ -0,1 +1,3 @@ | ||
| import constant from "./constant"; | ||
| var keyPrefix = "$"; | ||
@@ -16,7 +18,10 @@ | ||
| stack = new Array(depth * 2), | ||
| bind = key ? bindKey : bindIndex; | ||
| bind = key ? bindKey : bindIndex, | ||
| enter = this.enter(), // Note: arrayify’s! | ||
| exit = this.exit(); | ||
| if (typeof value !== "function") value = valueOf_(value); | ||
| visit(this._root, this.enter()._root, this.exit()._root, depth); | ||
| if (typeof value !== "function") value = constant(value); | ||
| visit(this._root, enter._root, exit._root, depth); | ||
| function visit(update, enter, exit, depth) { | ||
@@ -180,7 +185,1 @@ var i = -1, | ||
| }; | ||
| function valueOf_(value) { // XXX https://github.com/rollup/rollup/issues/12 | ||
| return function() { | ||
| return value; | ||
| }; | ||
| } |
@@ -18,3 +18,3 @@ import selection_select from "./selection-select"; | ||
| import selection_property from "./selection-property"; | ||
| import selection_class from "./selection-class"; | ||
| import selection_classed from "./selection-classed"; | ||
| import selection_text from "./selection-text"; | ||
@@ -25,3 +25,3 @@ import selection_html from "./selection-html"; | ||
| import selection_datum from "./selection-datum"; | ||
| import selection_event from "./selection-event"; | ||
| import selection_on from "./selection-on"; | ||
| import selection_dispatch from "./selection-dispatch"; | ||
@@ -61,12 +61,9 @@ | ||
| property: selection_property, | ||
| class: selection_class, | ||
| classed: selection_class, // deprecated alias | ||
| classed: selection_classed, | ||
| text: selection_text, | ||
| html: selection_html, | ||
| append: selection_append, | ||
| insert: selection_append, // deprecated alias | ||
| remove: selection_remove, | ||
| datum: selection_datum, | ||
| event: selection_event, | ||
| on: selection_event, // deprecated alias | ||
| on: selection_on, | ||
| dispatch: selection_dispatch | ||
@@ -73,0 +70,0 @@ }; |
@@ -1,2 +0,2 @@ | ||
| import {event} from "./selection-event"; | ||
| import {event} from "./selection-on"; | ||
@@ -3,0 +3,0 @@ export default function() { |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by35.07%
105284
- Number of package files
- increased by2.08%
49
- Number of lines in readme file
- increased by1500%
480
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Lines of code
- decreased by-0.06%
1784
No dependency changes