D3.tip is not a function

Question

I am trying to add a d3.tip to my d3 infographic. According to the d3.tip documentation, I installed the d3.tip with Bower. When the install finished, my terminal screens shows:

The terminal screen

I guess it was installed successfully.

But when I added d3.tip to my codes, the console.log keep showing "Barchart2.html:121 Uncaught TypeError: d3.tip is not a function."

Here is my code:

The d3.tip part of my script code

Can somebody tell me how to solve the problem, please?

Answer 1

You need to import d3-tip as imported d3 js. I am assuming you have installed d3-tip correctly.

import * as d3 from 'd3'; 
import d3Tip from "d3-tip";

Then you can use it as below:

var tip = d3Tip().attr('class', 'd3-tip').offset([-12,0])
.html(function(d) {
  /*  your code goes here */
});

This should fix your issue.