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?

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?

• javascript
• d3.js

• Look in the file directory is the D3.tip source code there ? And have you referenced it in your HTML ? – thatOneGuy Commented Apr 29, 2016 at 20:04
• 2 bower installing the file is all well and good, but have you loaded it in your JavaScript? <script src="/path/to/d3.tip.js"></script>? – Mark Commented Apr 29, 2016 at 22:47
• Thank you @Mark The source code you provided is not working. Instead, I used another one: <script src="labratrevenge./d3-tip/javascripts/…>, and it worked! I don't know why. However, although tips show up on my page, they are totally off the graphic and their positions are unstable. I am still figuring out why. – Mandy Zou Commented Apr 30, 2016 at 18:24
• Thank you, @thatOneGuy! I put a source code in my HTML! But how should I put a D3.tip source code in my file directory? – Mandy Zou Commented Apr 30, 2016 at 18:25
• is the D3.tip source code local with your JS, HTML and CSS files ? And have you referenced them in your HTML ? – thatOneGuy Commented Apr 30, 2016 at 18:31

1 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.