Getting error for d3-tip in angular2

Question

I use both d3 and d3-tip along with my @types,

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

I have an import statement,

 import * as d3 from 'd3'; 

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

  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"'. 

Answer 1

You are importing d3, but not d3-tip, this is a different package.

 import 'd3-tip'; 

Answer 2

I have the same problem in TypeScript.

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

====

WARNING. The information in this section may be outdated.

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

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

If you do not need compatibility with ES5, you can simply use the ES6 version:

https://github.com/cgav

====

(Aside, being new to D3js and should upgrade from an older version of D3 to D3 v4, I can tell you that I don’t like this process at all and in no way appreciate all the incompatibilities and violations. It becomes even more unpleasant. when you need to implement TypeScript 1.8 → 2.4 update into the mix.)