3

I'm using angular-cli which uses webpack under the hood in a project with TypeScript. Have to upgrade legacy d3 v3 to v4 and I'd like to keep all uses of .attr({ ... an object ... }) by changing it to .attrs().

I added d3-selection-multi (and @types/...). It compiles without error but when .attrs() is called there is an error.

My import:

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

d3-selection-multi just adds some methods to prototypes of objects of standard d3. Here is the source.

My code (not very important IMO):

bars.exit()
  .transition()
  .duration(duration)
  .ease(ease)
  .attrs(removeAttrs) // <--
  .remove();

The error:

bars.exit(...).transition(...).duration(...).ease(...).attrs is not a function

I'm using angular-cli 1.0.0-beta.19-3 'plain vanilla' (without any tweaks).

What's wrong?

Before marking this question as duplicate: I'm not using System.js and not jspm. The other posts and answers didn't help.

Improve this question
3
  • Did you npm install @types/d3-selection-multi d3-selection-multi? Can you then compile d3.select('svg').attrs({}) ? I doubt. Commented Dec 3, 2016 at 21:05
  • Compiling is not the problem. It compiles without error. But at runtime the method attrsis not found. Commented Dec 4, 2016 at 8:53
  • 1
    It looks like the ''d3-selection-multi.js' file is not read at runtime. Some answers in stackoverflow.com/questions/38855891/… point to 'angular-cli.json' where global script imports can be defined. What exactly comes from there and what from package.json I cannot tell. Also angular-cli is a complex beast and Beta.14 now runs on Webpack. Commented Dec 5, 2016 at 18:49
Related questions
9
Angular2-Seed + Typings + D3: Import error, 'Cannot find module 'd3''
4
d3.selection.prototype throwing an error with typescript and angular 2
5
d3 V4.2.1 TypeScript 2.0 error importing d3-selection-multi
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.