JSFiddle - React, Tailwind, and code Playground

by Thegreatmochi

HTML

<p>
 click the node to show description
</p>

JavaScript

let graph = {
  "nodes": [
    { "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta consequat felis, eget varius mi volutpat sit amet. Nullam lobortis vehicula felis, in tempor dui. Sed scelerisque purus ac nisl auctor finibus sit amet nec massa. Duis erat sem, suscipit non molestie vitae, accumsan nec tortor. Nulla sed facilisis ligula, nec interdum elit. Nam tortor lectus, sodales ut nulla ac, feugiat ultrices velit. Vestibulum nec ultricies nisi. Donec leo nibh, fringilla eget pretium nec, condimentum in nulla."} ]}

let svg = d3.select("body")
						.append("svg")
						.attr("width", 700)
						.attr("height", 800);

let nodes = svg.selectAll("circle")
				.data(graph.nodes)
				.enter()
				.append("circle")
                .attr("r", 20)
                .attr("cx", function(d) { return 20; })
                     .attr("cy", function(d) { return 20; })
                     .style("fill", "red");
let tip;
nodes.on("click", function (d){
  if (tip){ tip.remove()};

  tip = svg.append("g")
    .attr("id", "tip")
    .attr("transform", "translate(" + (d3.event.pageX -10)  + "," + (d3.event.pageY-35 ) + ")");

  let rect = tip.append("rect")
  .style("fill", "white")
  .style("stroke", "steelblue");

  tip.append("text")
    .text(d.description)
    .attr("dy", "1em")
    .attr("x", 5);

  let bbox = tip.node().getBBox();

  rect.attr("width", bbox.width + 5)
    .attr("height", bbox.height + 50)

});