d3 v4.0 custom build with ES6 modules

Question

I'm experimenting with the alpha of d3 v4.0, and attempting to create a custom build, within a jspm setup. I can't seem to get my head around how the new modular build is intended to work.

If I want to import a named export from a module, ie json from d3-request, I can do the following: import {json} from "d3-request"; after having installed the module via jspm/npm.

If I want to install the whole library, likewise import d3 from "d3";

If I want to install multiple modules and named exports and have them all available to me under the d3 namespace (ie, importing d3-shape alongside d3-request, and having access to d3.json and d3.line in the same d3 global), what is the correct syntax for this?

I realise that when using standalone versions of these modules globals such as d3_shape are exported. Is this the intention, to have separate namespaces for each module when bundling these modules with my application?

Answer 1

I believe the plan is to offer an ES6 build of the entire library once D3 4.0 is finished, along with a custom build generator, at which point you'll be able to do this:

import { json, line } from 'd3';

json( 'file.json', ( err, data ) => ... );

(Note that there's no d3 variable when you do this – you use the named imports directly.)

Currently, the d3 package is version 3, which doesn't have an ES6 build, so in the meantime there are two options – install the modules you need and import from them individually...

import { json } from 'd3-request';
import { line } from 'd3-shape';

json( 'file.json', ( err, data ) => ... );

...or create your own custom build:

// src/my-d3.js
export { json } from 'd3-request';
export { line } from 'd3-shape';

// src/app.js
import { json, line } from './my-d3.js';

Of those, I'd favour the first – it's more explicit, and possibly less likely to cause unused code to end up in your build.