score:2

Accepted answer

I have made necessary changes to your existing code to display the name and count of each nodes inside the circle.

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
  <script src="http://d3js.org/d3.v5.min.js"></script>
  <style>

    .node {
      cursor: pointer;
    }

    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
      /* If you want dots under the hoverable text */
    }

    path.link {
      fill: rgb(133, 129, 196);
      stroke: #333;
      stroke-width: 1.5px;
    }

    /* Tooltip text */

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;

      /* Position the tooltip text - see examples below! */
      position: absolute;
      z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }

    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }

    .node text {
      font: 12px sans-serif;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .node--internal text {
      text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
    }

    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }
  </style>
</head>

<body>


  <script type="text/javascript">
  var treeData = {
    name: "Top Level",
    count: 1200,
    children: [
      {
        name: "Level 2: A",
        count: 600,
        children: [
          { name: "Son of A", count: 200 },
          { name: "Daughter of A", count: 300 }
        ]
      },
      { name: "Level 2: B", count: 100 }
    ]
  };
var margin = { top: 50, right: 90, bottom: 50, left: 90 },
      width = 660 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    // declares a tree layout and assigns the size
    var treemap = d3.tree().size([width, height]);

    //  assigns the data to a hierarchy using parent-child relationships
    var nodes = d3.hierarchy(treeData);

    // maps the node data to the tree layout
    nodes = treemap(nodes);

    // append the svg obgect to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom),
      g = svg
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // adds the links between the nodes
    var link = g
      .selectAll(".link")
      .data(nodes.descendants().slice(1))
      .enter()
      .append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return (
          "M" +
          d.x +
          "," +
          d.y +
          "C" +
          d.x +
          "," +
          (d.y + d.parent.y) / 2 +
          " " +
          d.parent.x +
          "," +
          (d.y + d.parent.y) / 2 +
          " " +
          d.parent.x +
          "," +
          d.parent.y
        );
      });

    // adds each node as a group
    var node = g
      .selectAll(".node")
      .data(nodes.descendants())
      .enter()
      .append("g")
      .attr("class", function(d) {
        return "node" + (d.children ? " node--internal" : " node--leaf");
      })
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      })
      .on("mouseover", function(d) {
        var g = d3.select(this); // The node
        // The class is used to remove the additional text later
        var info = g
          .append("text")
          .classed("info", true)
          .attr("x", 20)
          .attr("y", 10)
          .text("More info");
      })
      .on("mouseout", function() {
        // Remove the info text on mouse out.
        d3.select(this)
          .select("text.info")
          .remove();
      });

    // adds the circle to the node
    node.append("circle").attr("r", 45);

    // adds the text to the node
    node
      .append("text")
      .attr("dy", ".35em")
      .attr("y", function(d) {
        // return d.children ? -20 : 20;
        return -10;
      })
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.data.name;
      });

          node
      .append("text")
      .attr("dy", ".35em")
      .attr("y", function(d) {
        return 10;
      })
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.data.count;
      });

</script>
</body>

</html>


Related Query

More Query from same tag