dagre-d3-esm example

ez-opendata openstreetmapGetPOIs

by jpeter06

HTML

<html>
  <body>
    <svg width="100%" height="95vh">
      <g />
    </svg>
  </body>
</html>

JavaScript

import * as d3 from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
import * as dagreD3 from "https://tbo47.github.io/dagre-d3-es.7.0.11.js";

function componentDidMount() {
    
    // Create a new directed graph
    var g = new dagreD3.graphlib.Graph({ directed: true });

    // Set an object for the graph label
    g.setGraph({});

    g.graph().rankdir = "LR";
    g.graph().ranksep = 50;
    g.graph().nodesep = 5;

    // Default to assigning a new object as a label for each new edge.
    g.setDefaultEdgeLabel(function () {
      return {};
    });

    // root
    g.setNode("root", {
      label: ` App Exp \n Optimization \n Improvement \n (Facebook)`,
      width: 70,
      height: 60,
      shape: "rect",
      style: "stroke: black; fill:blue; stroke-width: 1px; ",
      labelStyle: "font: 300 14px 'Helvetica Neue', Helvetica;fill: white;"
    });

    // g.setNode('root', {
    // 	label: `<span class='root-node'>${`App Exp \n Optimization \n Improvement \n (Facebook)`}</span>`,
    // 	labelType: 'html',
    // 	width: 70,
    // 	height: 60,
    // 	shape: 'rect',
    // 	style: 'stroke: white; fill:blue; stroke-width: 1px; ',
    // });

    // level 1
    g.setNode("put", {
      label: "PUT",
      width: 50,
      height: 20,
      shape: "ellipse",
      style: "stroke: black; fill:blue; stroke-width: 1px; ",
      labelStyle: "font: 300 14px 'Helvetica Neue', Helvetica;fill: white;"
    });
    g.setNode("cdt", {
      label: "CDT",
      width: 50,
      height: 20,
      shape: "ellipse"
    });
    g.setNode("ttc", {
      label: "TTC",
      width: 50,
      height: 20,
      shape: "ellipse"
    });
    g.setNode("ssr", {
      label: "SSR",
      width: 50,
      height: 20,
      shape: "ellipse"
    });

    // level 2
    g.setNode("ran", {
      label: "RAN",
      width: 50,
      height: 20,
      shape: "ellipse",
      style: "stroke: black; fill:blue; stroke-width: 1px; ",
      labelStyle: "font: 300 14px 'Helvetica Neue',...