d3-v4-bundler v0.0.4

d3-v4-bundler

A rollup-based bundler for customizing the combination of d3(v4) methods based on the need.

Why d3-v4-bundler

The d3 organization has one repository called d3-bundler, which help pack up d3 library. However, this package has been deprecated 2 years ago. Now d3 has switched to ES6 syntax and d3 method can be imported as you need. d3-v4-bundler can help you bundle d3 method as you need.

The benefits of using d3-v4-bundler:

• Not only generate the completed D3 library or standalone library as same as official plans, such as d3-arrayand d3-selection, but also can customize D3 bundler taking one-method as a unit or modifies the prototype of modules.
• Tracking the latest release synchronize with official D3 library.

Usage

1. Install d3-v4-bundler

> npm install d3-v4-bundler
> cd d3-v4-bundler

2. Customize ./index.js File

Defualt Setting

Keep the defualt config line on the top of the ./index.js file.

export {version} from "./node_modules/d3/build/package";

Completed Pattern

To generate the completed D3(v4) library, whose result will be as same as the latest D3(v4) library that has been published.

export * from "d3";

or

export * from "d3-array";
export * from "d3-axis";
export * from "d3-brush";
export * from "d3-chord";
export * from "d3-collection";
export * from "d3-color";
export * from "d3-dispatch";
export * from "d3-drag";
export * from "d3-dsv";
export * from "d3-ease";
export * from "d3-force";
export * from "d3-format";
export * from "d3-geo";
export * from "d3-hierarchy";
export * from "d3-interpolate";
export * from "d3-path";
export * from "d3-polygon";
export * from "d3-quadtree";
export * from "d3-queue";
export * from "d3-random";
export * from "d3-request";
export * from "d3-scale";
export * from "d3-selection";
export * from "d3-shape";
export * from "d3-time";
export * from "d3-time-format";
export * from "d3-timer";
export * from "d3-transition";
export * from "d3-voronoi";
export * from "d3-zoom";

Modules-based Pattern

To generate a d3 library with some specific modules

export * from "d3-selection";
export * from "d3-shape";
export * from "d3-transition";

Methods-based Pattern

To generate a d3 library taking one-method as a unit

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

Modules && Methods Pattern

To combine modules and methods pattern.

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

export * from "d3-array";

Modules Prototype Modification Pattern

The D3 author gave a demo that showed a method to customize D3 bundle using Rollup. This demonstrates importing d3-transition, which modifies selection.prototype to define selection.transition. The d3-v4-bundler can easily fulfill that propose as well.

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

import "d3-transition";

3. Bundle the Custom D3

After saving ./index.js file, run the command line in d3-v4-bundler directory as below:

> npm install && npm run build

4. D3 Bundle Output

All the custom D3 Bundle files can be found inside ./build

.
├── d3.js // "umd" format
├── d3.min.js // "umd" format && minified
└── d3.node.js // "cjs" format