shapes.html

<svg id="network" width="600" height="380"></svg>

<script type="module">
  import { network } from "https://cdn.jsdelivr.net/npm/@gramex/network@2";
  import { layer } from "https://cdn.jsdelivr.net/npm/@gramex/chartbase@1/+esm"
  import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

  // Load the data
  const data = await fetch("flare.json").then((r) => r.json());
  var root = d3.hierarchy(data);

  // Create the network
  const graph = network("#network", {
    links: root.links(),
    nodes: root.descendants(),
    nodeTag: "g",
    d3
  });

  const color = d3.scaleOrdinal(d3.schemeCategory10);
  // Draw label backgrounds
  const rect = layer(graph.nodes, "rect", "label-background")
    .attr("fill", (d) => color(d.depth))
    .attr("rx", 10)
    .attr("ry", 10)
    .attr("fill-opacity", 0.5)
    .attr("cursor", "pointer");
  // Draw labels
  const text = layer(graph.nodes, "text", "label")
    .text((d) => d.data.name)
    .attr("text-anchor", "middle")
    .attr("dy", "0.36em")
    .attr("font-size", 10)
    .attr("font-family", "sans-serif")
    .style("user-select", "none");
  // Center backgrounds around labels
  const textNodes = text.nodes();
  rect.each(function (d) {
    const box = textNodes[d.index].getBBox();
    d3.select(this)
      .attr("x", box.x - 5)
      .attr("y", box.y - 2)
      .attr("width", box.width + 10)
      .attr("height", box.height + 4);
  });
  // Draw links
  graph.links.attr("stroke", "rgba(0,0,0,0.2)");
</script>