D3 Custom Bundle with Webpack by curran

Another demonstration of a custom D3 bundle using Rollup. This demonstrates importing d3-transition, which modifies selection.prototype to define selection.transition:

import "d3-transition";

(There are other features in d3-transition, but they are not imported here because they are not used.) Note that you must also import selection from d3-selection; otherwise, Rollup doesn’t know that it needs to include the imported code from d3-transition. Rollup isn’t perfect at detecting which code needs to be included (and which code shouldn’t be included), so sometimes you need to give it a hand.

forked from mbostock‘s block: D3 Custom Bundle II

index.js

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

import "d3-transition";

index.html

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

d3.select("body").append("h1")
    .text("Hello, world!")
    .style("text-align", "center")
    .style("line-height", "320px")
    .style("font-size", "100px")
    .style("transform", "rotate(-180deg) scale(0.001, 0.001)")
  .transition()
    .duration(1500)
    .style("transform", null);

</script>

package.json

{
  "name": "d3-custom-example",
  "version": "0.0.1",
  "scripts": {
    "prepublish": "webpack && uglifyjs d3.js -c -m -o d3.min.js"
  },
  "devDependencies": {
    "d3-selection": "1",
    "d3-transition": "1",
    "uglify-js": "2",
    "webpack": "^2.2.1"
  }
}

webpack.config.js

module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname,
        filename: "d3.js",
        library: "d3",
        libraryTarget: "umd"
    }
};