D3 v4.0 custom build with ES6 modules

Question

I am experimenting with the alpha version of d3 v4.0 and trying to create a custom assembly in jspm setup. I can’t understand how the new modular assembly will work.

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

If I want to install the entire library, similarly import d3 from "d3";

If I want to install several modules and named export and provide them to all d3 namespaces available to me (i.e. importing a d3 form together with a d3 request and having access to d3.json and d3.line in the same d3 global ), what is the correct syntax for?

I understand that when using stand-alone versions of these modules, global variables such as d3_shape . Is it the intention to have separate namespaces for each module when linking these modules to my application?

Answer 1

I believe that the plan is to offer the ES6 build of the entire library after D3 4.0 is completed, along with a custom build generator, with which you can do this:

 import { json, line } from 'd3'; json( 'file.json', ( err, data ) => ... ); 

(Note that there is no d3 variable when you do this - you are directly using named imports.)

Currently, the d3 package is version 3, which does not have an ES6 build, so meanwhile there are two options: install the modules you need and import them separately ...

 import { json } from 'd3-request'; import { line } from 'd3-shape'; json( 'file.json', ( err, data ) => ... ); 

... or create your own custom assembly:

 // 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 these, I would prefer the first - it is more explicit and, possibly, less likely to cause unused code to be in your assembly.