dTree Demo

.treehouse

1.3.1

readme.md

dTree

dTree is the open source graph library that powers this site. It is written by the Swedish computer engineering student Erik Gärtner. It builds on top of D3 and aims at being a simple yet extensive library for building family trees.

Treehouse

This site acts as a playground that allows for easy demoing and hosting of dTree graphs.

Stylesheet

The stylesheet here is simple and only intended to show an easy example of what is possible. Most elementes in the graph can be customized using stylesheets and custom renderers.

Custom renderer

When using dTree on your own site you have the possibility to to fully customize how the library renders the text and the node. For security purposes Treehouse only allows for custom html templates using a handlebar template.

In this example the renderer displays the name of the node and the "favorite color" if the data is available.

data.json

[{
  "name": "Niclas Superlongsurname",
  "class": "man",
  "textClass": "emphasis",
  "marriages": [{
    "spouse": {
      "name": "Iliana",
      "class": "woman"
    },
    "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",
          "extra": {
            "favorite_color": "Blue"
          }
        }, {
          "name": "Emma",
          "class": "woman"
        }, {
          "name": "Julia",
          "class": "woman"
        }, {
          "name": "Jessica",
          "class": "woman"
        }]
      }]
    }]
  }]
}]

renderer.handlebars

{{name}}
{{#if extra.favorite_color}}
<br>({{extra.favorite_color}})
{{/if}}

stylesheet.css

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