A famous d3-tip lib adapted to the latest - d3.v6 version.
d3.v6 introduced several changes and some of them concerns d3-tip.
Those are:
- Global d3.event has been removed
- Every event handler, from now on, will receive event as a first argument
d3-tip version which lies under this repository, is adapted to this change.
It also fixes one annoying bug, when several DOM tip instances were being created , which eventually would lead unexpected and undesirable results.
See original documentation, but please note changes in tip.html API.
Short story is that, you will get same arguments in tip.html() as tip.show() receives, in the same order.
If you are using npm
npm i d3-v6-tip
And then use it like this in your application
import { tip as d3tip } from "d3-v6-tip";
const tip = d3tip()Otherwise, you can load as a standalone library or as part of D3. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:
If you want to load it as part of d3
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-v6-tip.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6@4/d3-tip.min.css">
<script>
const tip = d3.tip()
</script>If you want to load it as standalone
<script src="https://d3js.org/d3-selection.v2.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-v6-tip.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6@4/d3-tip.min.css">
<script>
var svg = d3.select('svg');
/* Initialize tooltip */
var tip = d3.tip().attr('class', 'd3-tip').html((EVENT,d)=> d );
/* Invoke the tip in the context of your visualization */
svg.call(tip)
// -------------- Simplest usage ----------------
svg.selectAll('rect')
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
// ------------- Conditional usage -------------
svg.selectAll('rect')
.on('mouseover', (event,d)=>{
if(someCondition) tip.show(event,d);
})
.on('mouseout', tip.hide)
// ------------- Showing tip on particular element, but based on other DOM element's data -------------
svg.selectAll('g')
.on('mouseover', function(event,d) {
const element = d3.select(this)
.select('.particular-element');
tip.show(event, d, element.node())
})
.on('mouseout', tip.hide)
</script>See minimal jsfiddle example here
for default styling, include this css file into your app
.d3-tip {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
padding: 20px;
pointer-events: none !important;
color: #203d5d;
box-shadow: 0 4px 20px 4px rgba(0, 20, 60, .1), 0 4px 80px -8px rgba(0, 20, 60, .2);
background-color: #fff;
border-radius: 4px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: #fff;
position: absolute;
pointer-events: none;
}
/* Northward tooltips */
.d3-tip.n:after {
content: "▼";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
.d3-tip.e:after {
content: "◀";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
.d3-tip.s:after {
content: "▲";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
.d3-tip.w:after {
content: "▶";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}- Caged created d3-tip for d3.v3
- cgav converted it to d3-v4 and ES6 code
- VACLAB removed ES6 specific code for wider browser support
- bumbeishvili adapted for newer d3.v6 version and published to NPM
David B (twitter)
David B (linkedin)
I am available for freelance data visualization work. Please contact me in case you'd like me to help you with my experience and expertise
You can also book data viz related consultation session with me
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent