How to integrate with existing d3 build?

[plmrry]

I'm wondering how this should be integrated with the entire d3 4.0 package.

My project is using ES6 import and export (via Babel).

Another way of framing this question is: How should a custom plugin be integrated into the existing d3 library – using ES6 import and export?

Would this require a customized version of the d3 index.js file?
And if so, what would that look like?

I tried doing this:

import selection from 'd3-selection';
import 'd3-selection-multi';
import d3 from 'd3';
Object.assign(d3, selection);

But that's obviously wrong – and it ended up breaking event handling.

[mbostock]

I believe Babel doesn’t correctly handle re-exporting d3.event because it assumes that exported values never change, so this might be a Babel issue. ES2015 modules export bindings, or “live connections to values”, so it’s valid for the value of an exported symbol to change. (And only the module that exports the symbol is allowed to set its value.)

(Rollup also doesn’t re-export it correctly in the CommonJS format, which is why there’s a script to patch the Node bundle, d3.node.js.)

If you want a transpile a custom D3 build down to ES5, I recommend editing the index.js file and re-building with Rollup. You can also simply concatenate the provided ES5 UMD bundles of the individual modules to create a custom bundle; for example:

<script src="https://d3js.org/d3-selection.v0.7.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.2.min.js"></script>
<script>

var div = d3_selection.selectAll("div");

</script>

[plmrry]

Thanks for your response @mbostock

Just to make sure I understand this correctly: What would the edit to index.js look like?

Something like this?

import { selection } from 'd3-selection';
import 'd3-selection-multi'; // Just side effects?
export selection;

What confuses me is that d3-selection-multi's index.js doesn't export anything, it just performs side effects on selection.

[mbostock]

Yes, you need this to apply side-effects to selection.prototype:

import "d3-selection-multi";

The simplest thing to do would be to just add that line to the existing index.js. Then, if you don’t want some of the other functionality in the default build, delete the corresponding exports.

I’ve updated my custom bundle example here:

http://bl.ocks.org/mbostock/bb09af4c39c79cffcde4

[plmrry]

@mbostock Awesome, thank you!