Complete basic example somewhere?

gerases commented 1 year ago

Hi, I just stumbled upon your library and I'm not fully sure how to create a standalone example. Do I need to run nodejs or can the script tags download everything from somewhere? I've got this so far and it's not working (in safari at least). Thanks for any suggestions.

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>D3Dtree</title>
      <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
      <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/d3-dtree@2.4.1/dist/dTree.min.js"></script>
      <style>
          .linage {
              fill: none;
              stroke: #000;
          }
          .marriage {
              fill: none;
              stroke: black;
          }
          .man {
              background-color: lightblue;
              border-style: solid;
              border-width: 1px;
              box-sizing: border-box;
          }
          .woman {
              background-color: pink;
              border-style: solid;
              border-width: 1px;
              box-sizing: border-box;
          }
          .emphasis{
              font-style: italic;
          }

          p {
              padding:0;
              margin:0;
              font-size: 10px;
          }
          svg {
              border-style: solid;
              border-width: 1px;
          }
      </style>
  <body>
  <div id="graph"></div>
  <script>
  </head>
  treeData =
  [{
    name: "Father",                         // The name of the node
    class: "node",                          // The CSS class of the node
    textClass: "nodeText",                  // The CSS class of the text in the node
    depthOffset: 1,                         // Generational height offset
    marriages: [{                           // Marriages is a list of nodes
      spouse: {                             // Each marriage has one spouse
        name: "Mother",
      },
      children: [{                          // List of children nodes
        name: "Child",
      }]
    }],
    extra: {}                               // Custom data passed to renderers
  }]

      dTree.init(treeData, {
          target: "#graph",
          debug: true,
          height: 200,
          width: 800}
      );
  </script>
  </body>

ErikGartner commented 1 year ago

Did you checkout the jsfiddle? You should be able to extract all parts to a single html example.

https://jsfiddle.net/rha8sg79/

gerases commented 1 year ago

Yes, I've looked at that but the relevant <script> tags for including the all libraries are not there?

ErikGartner commented 1 year ago

If you look to the left you see resources, i.e. libraries loaded (essentially in a script tag).

gerases commented 1 year ago

When I try to put it all together, it's not working. If you look at the source code I pasted here, does it work for you?

gerases commented 1 year ago

Figured out the problem -- I clicked on each of the libraries in jsfiddle and copied the path for each. Everything started working after that.

For posterity:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>D3Dtree</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-dtree/dist/dTree.min.js"></script>
    <style>

    body {
        font: 10px sans-serif;
    }
    .linage {
        fill: none;
        stroke: #000;
    }
    .marriage {
        fill: none;
        stroke: black;
    }
    .man {
        background-color: lightblue;
            border-style: solid;
            border-width: 1px;
            box-sizing: border-box;
    }
    .woman {
            background-color: pink;
            border-style: solid;
            border-width: 1px;
            box-sizing: border-box;
    }
    .emphasis{
            font-style: italic;
    }
    p {
        padding:0;
        margin:0;
    }
    svg {
        border-style: solid;
        border-width: 1px;
    }
    </style>
</head>

<body>
<div id="graph"></div>
<script>
treeData = [{
  "name": "Niclas Superlongsurname",
  "class": "man",
  "textClass": "emphasis",
  "marriages": [{
    "spouse": {
      "name": "Iliana",
      "class": "woman",
      "extra": {
        "nickname": "Illi"
      }
    },
    "children": [{
      "name": "James",
      "class": "man",
      "marriages": [{
        "spouse": {
          "name": "Alexandra",
          "class": "woman"
        },
        "children": [{
          "name": "Eric",
          "class": "man",
          "marriages": [{
            "spouse": {
              "name": "Eva",
              "class": "woman"
            }
          }]
        }, {
          "name": "Jane",
          "class": "woman"
        }, {
          "name": "Jasper",
          "class": "man"
        }, {
          "name": "Emma",
          "class": "woman"
        }, {
          "name": "Julia",
          "class": "woman"
        }, {
          "name": "Jessica",
          "class": "woman"
        }]
      }]
    }]
  }]
}]

tree = dTree.init(treeData, {
  target: "#graph",
  debug: true,
  height: 800,
  width: 1200,
  callbacks: {
    nodeClick: function(name, extra) {
      console.log(name);
    },
    textRenderer: function(name, extra, textClass) {
        // THis callback is optinal but can be used to customize
      // how the text is rendered without having to rewrite the entire node
      // from screatch.
        if (extra && extra.nickname)
        name = name + " (" + extra.nickname + ")";
        return "<p align='center' class='" + textClass + "'>" + name + "</p>";
    },
    nodeRenderer: function(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
      // This callback is optional but can be used to customize the
      // node element using HTML.
      let node = '';
      node += '<div ';
      node += 'style="height:100%;width:100%;" ';
      node += 'class="' + nodeClass + '" ';
      node += 'id="node' + id + '">\n';
      node += textRenderer(name, extra, textClass);
      node += '</div>';
      return node;
  }
  }
});

// tree.zoomTo(0, 0, zoom = 0.9, duration = 0);
</script>
</body>
</html>

ErikGartner / dTree

Complete basic example somewhere? #145