d3 V4.2.1 TypeScript 2.0 error importing d3-selection-multi

Question

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

import * as d3 from 'd3';

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

After downloading that module d3-selection-multi with jspm. I try to import it into my project like so.

import * as d3 from 'd3';
import 'jspm_packages/npm/[email protected]';

I then try and 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 am also getting some compile error which i get all the time but yet they always still compile and the code runs

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

Can any one explain what I am doing wrong and offer a solution?

Not the cause of your problem, but if that style also uses an object, it has to be styles. — Gerardo Furtado
– Gerardo Furtado, Commented Aug 9, 2016 at 6:15
@Gerardo Furtado Yes but how to I get them to work without throwing an error — Dblock247
– Dblock247, Commented Aug 9, 2016 at 6:17
First, check if selection-multi us being loaded. Create a simple code, something like var test = d3.select("foo").attrs({"bar":"baz}); and see if it works. — Gerardo Furtado
– Gerardo Furtado, Commented Aug 9, 2016 at 6:20
@Gerardo Furtado it does not work. I get the following error: d3.select(...).attrs is not a function — Dblock247
– Dblock247, Commented Aug 9, 2016 at 7:08
Yep, so you probably have a problem importing selection-multi. Let's wait and see if someone comes to help you. Meanwhile, as a workaround, remember that you can always use several attr chained. — Gerardo Furtado
– Gerardo Furtado, Commented Aug 9, 2016 at 7:26

user5325596 · Accepted Answer · 2016-08-19 16:48:59Z

1

The following should work

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

answered Aug 19, 2016 at 16:48

user5325596

2,4505 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Øystein Amundsen Over a year ago

angular-cli complains about this. __WEBPACK_IMPORTED_MODULE_4_d3__.select(...).attrs is not a function :-(

Cowman Over a year ago

@ØysteinAmundsen Did you ever figure this issue out? I'm experiencing the exact same confusing problem.

Øystein Amundsen Over a year ago

@Cowman I posted my solution as an answer here: stackoverflow.com/questions/38842984/…

Øystein Amundsen · Accepted Answer · 2016-12-08 06:17:20Z

1

I ended up having to create a 'bundle' file and import that instead of importing individual d3 packages. This is probably not ideal, but it works (I've commented out packages which I do not need, in order to save on space):

// 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';

To use this, I just have to:

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

P.S. Probably doesn't matter, but I'm building my project using angular-cli.

answered Dec 8, 2016 at 6:17

Øystein Amundsen

4,2838 gold badges49 silver badges67 bronze badges

1 Comment

Cowman Over a year ago

This is useful for me! In addition I added them to my vendors entry in my webpack config so it doesn't put the d3 code towards my app entry.

jake · Accepted Answer · 2016-08-24 21:01:51Z

0

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

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

edited Aug 24, 2016 at 21:01

answered Aug 24, 2016 at 20:55

jake

48810 silver badges19 bronze badges

Collectives™ on Stack Overflow

d3 V4.2.1 TypeScript 2.0 error importing d3-selection-multi

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related