Skip to content

Instantly share code, notes, and snippets.

@ErikGartner
Last active October 9, 2024 13:22
Show Gist options
  • Save ErikGartner/58e58be650453b6d49d7 to your computer and use it in GitHub Desktop.
Save ErikGartner/58e58be650453b6d49d7 to your computer and use it in GitHub Desktop.
dTree Demo

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.

[{
"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"
}]
}]
}]
}]
}]
{{name}}
{{#if extra.favorite_color}}
<br>({{extra.favorite_color}})
{{/if}}
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;
}
@xemasiv
Copy link

xemasiv commented Mar 13, 2018

Hey man, thanks a lot for this!

Your library is well written good lord.

@Agrament
Copy link

Dkdk

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment