D3 V4.2.1 TypeScript Error 2.0 Import d3-selection-multi

Question

I am trying to import d3 v4 into a typescript project using jspm and systemjs. I can import d3 correctly using this

import * as d3 from 'd3';

This works, and it allows me to make selections, etc. I tried to use the attr function and passed it an object that did not work. I found that d3 v4 includes this as a separate module.

After downloading this d3-selection-multi module with jspm. I am trying to import it into my project like this.

import * as d3 from 'd3';
import 'jspm_packages/npm/d3-selection-multi@1.0.0';

Then I try to use the attrs function, but the console logs the following error

(index): 40 Error: (SystemJS) d3.selectAll (...). data (...). style (...). attrs is not a function (...)

I also get some compilation error that I get all the time, but still they still compile and the code runs

error TS2307: Cannot find module 'd3'
error TS1110: Type expected

- , , ?

Answer 1

  import * as d3 from 'd3';
  import 'd3-selection-multi';

Answer 2

"bundle" d3. , , , ( , , ):

// export * from 'd3-array';
// export * from 'd3-axis';
// export * from 'd3-brush';
// export * from 'd3-chord';
// export * from 'd3-collection';
// export * from 'd3-color';
// export * from 'd3-dispatch';
// export * from 'd3-drag';
// export * from 'd3-dsv';
// export * from 'd3-ease';
// export * from 'd3-force';
// export * from 'd3-format';
// export * from 'd3-geo';
// export * from 'd3-hierarchy';
// export * from 'd3-interpolate';
// export * from 'd3-path';
// export * from 'd3-polygon';
// export * from 'd3-quadtree';
// export * from 'd3-queue';
// export * from 'd3-random';
// export * from 'd3-request';
// export * from 'd3-scale';
export * from 'd3-selection';
export * from 'd3-selection-multi';
export * from 'd3-shape';
// export * from 'd3-time';
// export * from 'd3-time-format';
// export * from 'd3-timer';
// export * from 'd3-transition';
// export * from 'd3-voronoi';
// export * from 'd3-zoom';

, :

import * as D3 from './d3.bunde.ts';

P.S. , , angular -cli.

Answer 3

jspm + d3-selection-multi ": https://github.com/jakeNiemiec/jspm_d3

If you need to import all D3, use jspm install npm:d3. This will add a little bloat. Remember that jspm comes with rollup, take a look at the build script in package.json .