use d3 to create neo4j node tooltip - d3.js

Question

When using neo4j, if you click the node, the circle tooltip will be shown with three new features.
I am just wondering how to have this kind of tooltip by using d3. Does anyone has any ideas how to implement it?
Thanks.

Answer 1

Here is a very basic example to get you started.
It displays a circle and its concentric "tooltip" arcs when it's clicked:
var width = 400;
var height = 200;
var svg =
d3.select("svg").attr("width", width).attr("height", height)
.append("g").attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
var clicked = false;
svg.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 45)
.attr("fill", "green")
.attr("stroke", "light-grey")
.on("click", addOrRemoveTooltip)
.attr("cursor", "pointer");
function addOrRemoveTooltip() {
if (clicked) {
d3.selectAll("path").remove();
clicked = false;
} else {
var arc = d3.arc().innerRadius(47).outerRadius(80);
svg.selectAll("arcs")
.data([
{ start: 0, end: 1/3 },
{ start: 1/3, end: 2/3 },
{ start: 2/3, end: 1 }
])
.enter().append("path")
.attr("d", d => arc({
"startAngle": d.start * 2 * Math.PI + 0.01,
"endAngle": d.end * 2 * Math.PI - 0.01
}))
.attr("fill", "lightgrey");
clicked = true;
}
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
The circle is given a listener on clicks:
svg.append("circle").on("click", doSomething)
When the circle is clicked, this listener is activated and draws 3 arcs this way:
var arc = d3.arc().innerRadius(47).outerRadius(80);
svg.selectAll("arcs")
.data([
{ start: 0, end: 1/3 },
{ start: 1/3, end: 2/3 },
{ start: 2/3, end: 1 }
])
.enter().append("path")
.attr("d", d => arc({
"startAngle": d.start * 2 * Math.PI + 0.01,
"endAngle": d.end * 2 * Math.PI - 0.01
}))
We then need a global variable which will store the status of the button: if it's clicked or not.
This way when the circle's click listener is activated again, we know that its previous state was clicked, which means the tooltip arcs should be removed:
d3.selectAll("path").remove();