D3 Custom Bundle II by mbostock

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.

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": "rollup -c -f umd -n d3 -o d3.js -- index.js && uglifyjs d3.js -c -m -o d3.min.js"
  },
  "devDependencies": {
    "d3-selection": "1",
    "d3-transition": "1",
    "rollup": "0.41",
    "rollup-plugin-node-resolve": "2",
    "uglify-js": "2"
  }
}

rollup.config.js

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

export default {
  plugins: [node()]
};