block by mbostock bb09af4c39c79cffcde4

D3 Custom Bundle

Full Screen

This is a demonstration of building a custom D3 4.0 bundle using ES2015 modules and Rollup. Custom bundles can be optimized to contain only the code you need. This example exposes just three fields on the d3 object: d3.event, d3.select and d3.selectAll. The minified and gzipped bundle is only 3,691 bytes, a savings of 93% over the default build!

To build:

npm install
npm run prepublish

You may also run Rollup and UglifyJS directly:

rollup -c && uglifyjs d3.js -c -m -o d3.min.js

index.js

export {
  event,
  select,
  selectAll
} from "d3-selection";

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.min.js"></script>
<script>

d3.select("body").append("h1").text("Hello, world!");

</script>

d3.min.js

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(this,function(t){"use strict";function n(t){return function(){var n=this.ownerDocument,e=this.namespaceURI;return e===K&&n.documentElement.namespaceURI===K?n.createElement(t):n.createElementNS(e,t)}}function e(t){return function(){return this.ownerDocument.createElementNS(t.space,t.local)}}function r(t,n,e){return t=i(t,n,e),function(n){var e=n.relatedTarget;e&&(e===this||8&e.compareDocumentPosition(this))||t.call(this,n)}}function i(n,e,r){return function(i){var o=t.event;t.event=i;try{n.call(this,this.__data__,e,r)}finally{t.event=o}}}function o(t){return t.trim().split(/^|\s+/).map(function(t){var n="",e=t.indexOf(".");return e>=0&&(n=t.slice(e+1),t=t.slice(0,e)),{type:t,name:n}})}function u(t){return function(){var n=this.__on;if(n){for(var e,r=0,i=-1,o=n.length;r<o;++r)e=n[r],t.type&&e.type!==t.type||e.name!==t.name?n[++i]=e:this.removeEventListener(e.type,e.listener,e.capture);++i?n.length=i:delete this.__on}}}function s(t,n,e){var o=rt.hasOwnProperty(t.type)?r:i;return function(r,i,u){var s,a=this.__on,c=o(n,i,u);if(a)for(var l=0,f=a.length;l<f;++l)if((s=a[l]).type===t.type&&s.name===t.name)return this.removeEventListener(s.type,s.listener,s.capture),this.addEventListener(s.type,s.listener=c,s.capture=e),void(s.value=n);this.addEventListener(t.type,c,e),s={type:t.type,name:t.name,value:n,listener:c,capture:e},a?a.push(s):this.__on=[s]}}function a(){}function c(){return[]}function l(t,n){this.ownerDocument=t.ownerDocument,this.namespaceURI=t.namespaceURI,this._next=null,this._parent=t,this.__data__=n}function f(t,n,e,r,i,o){for(var u,s=0,a=n.length,c=o.length;s<c;++s)(u=n[s])?(u.__data__=o[s],r[s]=u):e[s]=new l(t,o[s]);for(;s<a;++s)(u=n[s])&&(i[s]=u)}function h(t,n,e,r,i,o,u){var s,a,c,f={},h=n.length,p=o.length,_=new Array(h);for(s=0;s<h;++s)(a=n[s])&&(_[s]=c=_t+u.call(a,a.__data__,s,n),c in f?i[s]=a:f[c]=a);for(s=0;s<p;++s)c=_t+u.call(t,o[s],s,o),(a=f[c])?(r[s]=a,a.__data__=o[s],f[c]=null):e[s]=new l(t,o[s]);for(s=0;s<h;++s)(a=n[s])&&f[_[s]]===a&&(i[s]=a)}function p(t,n){return t<n?-1:t>n?1:t>=n?0:NaN}function _(t){return function(){this.removeAttribute(t)}}function d(t){return function(){this.removeAttributeNS(t.space,t.local)}}function v(t,n){return function(){this.setAttribute(t,n)}}function m(t,n){return function(){this.setAttributeNS(t.space,t.local,n)}}function y(t,n){return function(){var e=n.apply(this,arguments);null==e?this.removeAttribute(t):this.setAttribute(t,e)}}function g(t,n){return function(){var e=n.apply(this,arguments);null==e?this.removeAttributeNS(t.space,t.local):this.setAttributeNS(t.space,t.local,e)}}function w(t){return function(){this.style.removeProperty(t)}}function A(t,n,e){return function(){this.style.setProperty(t,n,e)}}function x(t,n,e){return function(){var r=n.apply(this,arguments);null==r?this.style.removeProperty(t):this.style.setProperty(t,r,e)}}function b(t){return function(){delete this[t]}}function S(t,n){return function(){this[t]=n}}function E(t,n){return function(){var e=n.apply(this,arguments);null==e?delete this[t]:this[t]=e}}function N(t){return t.trim().split(/^|\s+/)}function C(t){return t.classList||new M(t)}function M(t){this._node=t,this._names=N(t.getAttribute("class")||"")}function L(t,n){for(var e=C(t),r=-1,i=n.length;++r<i;)e.add(n[r])}function P(t,n){for(var e=C(t),r=-1,i=n.length;++r<i;)e.remove(n[r])}function q(t){return function(){L(this,t)}}function O(t){return function(){P(this,t)}}function D(t,n){return function(){(n.apply(this,arguments)?L:P)(this,t)}}function B(){this.textContent=""}function T(t){return function(){this.textContent=t}}function j(t){return function(){var n=t.apply(this,arguments);this.textContent=null==n?"":n}}function z(){this.innerHTML=""}function H(t){return function(){this.innerHTML=t}}function I(t){return function(){var n=t.apply(this,arguments);this.innerHTML=null==n?"":n}}function R(){this.nextSibling&&this.parentNode.appendChild(this)}function U(){this.previousSibling&&this.parentNode.insertBefore(this,this.parentNode.firstChild)}function k(){return null}function V(){var t=this.parentNode;t&&t.removeChild(this)}function X(t,n,e){var r=Ct(t),i=r.CustomEvent;i?i=new i(n,e):(i=r.document.createEvent("Event"),e?(i.initEvent(n,e.bubbles,e.cancelable),i.detail=e.detail):i.initEvent(n,!1,!1)),t.dispatchEvent(i)}function $(t,n){return function(){return X(this,t,n)}}function F(t,n){return function(){return X(this,t,n.apply(this,arguments))}}function G(t,n){this._groups=t,this._parents=n}function J(){return new G([[document.documentElement]],Rt)}var K="http://www.w3.org/1999/xhtml",Q={svg:"http://www.w3.org/2000/svg",xhtml:K,xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"},W=function(t){var n=t+="",e=n.indexOf(":");return e>=0&&"xmlns"!==(n=t.slice(0,e))&&(t=t.slice(e+1)),Q.hasOwnProperty(n)?{space:Q[n],local:t}:t},Y=function(t){var r=W(t);return(r.local?e:n)(r)},Z=function(t){return function(){return this.matches(t)}};if("undefined"!=typeof document){var tt=document.documentElement;if(!tt.matches){var nt=tt.webkitMatchesSelector||tt.msMatchesSelector||tt.mozMatchesSelector||tt.oMatchesSelector;Z=function(t){return function(){return nt.call(this,t)}}}}var et=Z,rt={};if(t.event=null,"undefined"!=typeof document){var it=document.documentElement;"onmouseenter"in it||(rt={mouseenter:"mouseover",mouseleave:"mouseout"})}var ot=function(t,n,e){var r,i,a=o(t+""),c=a.length;{if(!(arguments.length<2)){for(l=n?s:u,null==e&&(e=!1),r=0;r<c;++r)this.each(l(a[r],n,e));return this}var l=this.node().__on;if(l)for(var f,h=0,p=l.length;h<p;++h)for(r=0,f=l[h];r<c;++r)if((i=a[r]).type===f.type&&i.name===f.name)return f.value}},ut=function(t){return null==t?a:function(){return this.querySelector(t)}},st=function(t){"function"!=typeof t&&(t=ut(t));for(var n=this._groups,e=n.length,r=new Array(e),i=0;i<e;++i)for(var o,u,s=n[i],a=s.length,c=r[i]=new Array(a),l=0;l<a;++l)(o=s[l])&&(u=t.call(o,o.__data__,l,s))&&("__data__"in o&&(u.__data__=o.__data__),c[l]=u);return new G(r,this._parents)},at=function(t){return null==t?c:function(){return this.querySelectorAll(t)}},ct=function(t){"function"!=typeof t&&(t=at(t));for(var n=this._groups,e=n.length,r=[],i=[],o=0;o<e;++o)for(var u,s=n[o],a=s.length,c=0;c<a;++c)(u=s[c])&&(r.push(t.call(u,u.__data__,c,s)),i.push(u));return new G(r,i)},lt=function(t){"function"!=typeof t&&(t=et(t));for(var n=this._groups,e=n.length,r=new Array(e),i=0;i<e;++i)for(var o,u=n[i],s=u.length,a=r[i]=[],c=0;c<s;++c)(o=u[c])&&t.call(o,o.__data__,c,u)&&a.push(o);return new G(r,this._parents)},ft=function(t){return new Array(t.length)},ht=function(){return new G(this._enter||this._groups.map(ft),this._parents)};l.prototype={constructor:l,appendChild:function(t){return this._parent.insertBefore(t,this._next)},insertBefore:function(t,n){return this._parent.insertBefore(t,n)},querySelector:function(t){return this._parent.querySelector(t)},querySelectorAll:function(t){return this._parent.querySelectorAll(t)}};var pt=function(t){return function(){return t}},_t="$",dt=function(t,n){if(!t)return d=new Array(this.size()),c=-1,this.each(function(t){d[++c]=t}),d;var e=n?h:f,r=this._parents,i=this._groups;"function"!=typeof t&&(t=pt(t));for(var o=i.length,u=new Array(o),s=new Array(o),a=new Array(o),c=0;c<o;++c){var l=r[c],p=i[c],_=p.length,d=t.call(l,l&&l.__data__,c,r),v=d.length,m=s[c]=new Array(v),y=u[c]=new Array(v),g=a[c]=new Array(_);e(l,p,m,y,g,d,n);for(var w,A,x=0,b=0;x<v;++x)if(w=m[x]){for(x>=b&&(b=x+1);!(A=y[b])&&++b<v;);w._next=A||null}}return u=new G(u,r),u._enter=s,u._exit=a,u},vt=function(){return new G(this._exit||this._groups.map(ft),this._parents)},mt=function(t){for(var n=this._groups,e=t._groups,r=n.length,i=e.length,o=Math.min(r,i),u=new Array(r),s=0;s<o;++s)for(var a,c=n[s],l=e[s],f=c.length,h=u[s]=new Array(f),p=0;p<f;++p)(a=c[p]||l[p])&&(h[p]=a);for(;s<r;++s)u[s]=n[s];return new G(u,this._parents)},yt=function(){for(var t=this._groups,n=-1,e=t.length;++n<e;)for(var r,i=t[n],o=i.length-1,u=i[o];--o>=0;)(r=i[o])&&(u&&u!==r.nextSibling&&u.parentNode.insertBefore(r,u),u=r);return this},gt=function(t){function n(n,e){return n&&e?t(n.__data__,e.__data__):!n-!e}t||(t=p);for(var e=this._groups,r=e.length,i=new Array(r),o=0;o<r;++o){for(var u,s=e[o],a=s.length,c=i[o]=new Array(a),l=0;l<a;++l)(u=s[l])&&(c[l]=u);c.sort(n)}return new G(i,this._parents).order()},wt=function(){var t=arguments[0];return arguments[0]=this,t.apply(null,arguments),this},At=function(){var t=new Array(this.size()),n=-1;return this.each(function(){t[++n]=this}),t},xt=function(){for(var t=this._groups,n=0,e=t.length;n<e;++n)for(var r=t[n],i=0,o=r.length;i<o;++i){var u=r[i];if(u)return u}return null},bt=function(){var t=0;return this.each(function(){++t}),t},St=function(){return!this.node()},Et=function(t){for(var n=this._groups,e=0,r=n.length;e<r;++e)for(var i,o=n[e],u=0,s=o.length;u<s;++u)(i=o[u])&&t.call(i,i.__data__,u,o);return this},Nt=function(t,n){var e=W(t);if(arguments.length<2){var r=this.node();return e.local?r.getAttributeNS(e.space,e.local):r.getAttribute(e)}return this.each((null==n?e.local?d:_:"function"==typeof n?e.local?g:y:e.local?m:v)(e,n))},Ct=function(t){return t.ownerDocument&&t.ownerDocument.defaultView||t.document&&t||t.defaultView},Mt=function(t,n,e){var r;return arguments.length>1?this.each((null==n?w:"function"==typeof n?x:A)(t,n,null==e?"":e)):Ct(r=this.node()).getComputedStyle(r,null).getPropertyValue(t)},Lt=function(t,n){return arguments.length>1?this.each((null==n?b:"function"==typeof n?E:S)(t,n)):this.node()[t]};M.prototype={add:function(t){var n=this._names.indexOf(t);n<0&&(this._names.push(t),this._node.setAttribute("class",this._names.join(" ")))},remove:function(t){var n=this._names.indexOf(t);n>=0&&(this._names.splice(n,1),this._node.setAttribute("class",this._names.join(" ")))},contains:function(t){return this._names.indexOf(t)>=0}};var Pt=function(t,n){var e=N(t+"");if(arguments.length<2){for(var r=C(this.node()),i=-1,o=e.length;++i<o;)if(!r.contains(e[i]))return!1;return!0}return this.each(("function"==typeof n?D:n?q:O)(e,n))},qt=function(t){return arguments.length?this.each(null==t?B:("function"==typeof t?j:T)(t)):this.node().textContent},Ot=function(t){return arguments.length?this.each(null==t?z:("function"==typeof t?I:H)(t)):this.node().innerHTML},Dt=function(){return this.each(R)},Bt=function(){return this.each(U)},Tt=function(t){var n="function"==typeof t?t:Y(t);return this.select(function(){return this.appendChild(n.apply(this,arguments))})},jt=function(t,n){var e="function"==typeof t?t:Y(t),r=null==n?k:"function"==typeof n?n:ut(n);return this.select(function(){return this.insertBefore(e.apply(this,arguments),r.apply(this,arguments)||null)})},zt=function(){return this.each(V)},Ht=function(t){return arguments.length?this.property("__data__",t):this.node().__data__},It=function(t,n){return this.each(("function"==typeof n?F:$)(t,n))},Rt=[null];G.prototype=J.prototype={constructor:G,select:st,selectAll:ct,filter:lt,data:dt,enter:ht,exit:vt,merge:mt,order:yt,sort:gt,call:wt,nodes:At,node:xt,size:bt,empty:St,each:Et,attr:Nt,style:Mt,property:Lt,classed:Pt,text:qt,html:Ot,raise:Dt,lower:Bt,append:Tt,insert:jt,remove:zt,datum:Ht,on:ot,dispatch:It};var Ut=function(t){return"string"==typeof t?new G([[document.querySelector(t)]],[document.documentElement]):new G([[t]],Rt)},kt=function(t){return"string"==typeof t?new G([document.querySelectorAll(t)],[document.documentElement]):new G([null==t?[]:t],Rt)};t.select=Ut,t.selectAll=kt,Object.defineProperty(t,"__esModule",{value:!0})});

package.json

{
  "name": "d3-custom-example",
  "version": "0.0.1",
  "scripts": {
    "prepublish": "rollup -c && uglifyjs d3.js -c -m -o d3.min.js"
  },
  "devDependencies": {
    "d3-selection": "1",
    "rollup": "0.36",
    "rollup-plugin-node-resolve": "2",
    "uglify-js": "2"
  }
}

rollup.config.js

import node from "rollup-plugin-node-resolve";

export default {
  entry: "index.js",
  format: "umd",
  moduleName: "d3",
  plugins: [node()],
  dest: "d3.js"
};