CODEWITHSUNDEEP
angulard3.js
shazia perween
shazia perween

Reputation: 607

getting error for d3-tip in angular2

I am using both d3 and d3-tip along with their @types,

 "@types/d3": "^4.4.0",
"@types/d3-tip": "^3.5.2",

"d3": "^4.4.0",
"d3-tip": "^0.7.1",

I have below import statement,

import * as d3 from 'd3';

When trying to compile below typescript code, got below error,

 var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function (d) {
            return "<strong>Frequency:</strong> <span style='color:red'></span>";
        })

Error,

error TS2339: Property 'tip' does not exist on type 'typeof "C:/bugFix/WebPackPOC/src/WebPackApp/node_modules/@types/d3/index"'.

Upvotes: 6

Views: 1185

Answers (2)

Yonet
Yonet

Reputation: 106

You are importing d3 but not d3-tip, which is another package.

import 'd3-tip';

Upvotes: 2

Bart Read
Bart Read

Reputation: 2777

I'm having the same problem in TypeScript.

EDIT: The latest version of d3-tip at https://github.com/Caged/d3-tip may now be sufficient; I'm about to test.

====

WARNING: The information in this section may be out of date.

I think you may need to use this library, which is D3 v4 compatible (also ES5 compatible):

https://github.com/VACLab/d3-tip

If you don't need ES5 compatibility you can just use the ES6 version at:

https://github.com/cgav

====

(As an aside, being new to D3js and having to upgrade from an older version of D3 to D3 v4, I can tell you that I am not enjoying this process at all, and I am not in any way appreciative of all the incompatibilities and breaking changes. It only gets more frustrating when you have to inject a TypeScript 1.8 -> 2.4 upgrade into the mix.)

Upvotes: 0

Related Questions