Skip to content

Instantly share code, notes, and snippets.

@CalebMacdonaldBlack
Forked from ErikGartner/.treehouse
Last active February 2, 2018 05:03
Show Gist options
  • Save CalebMacdonaldBlack/baf94d4c0fa1ffdb32513d9485ca8dea to your computer and use it in GitHub Desktop.
Save CalebMacdonaldBlack/baf94d4c0fa1ffdb32513d9485ca8dea 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": "root",
"textClass": "emphasis",
"marriages": [{
"spouse": {
"name": "Iliana",
"class": "root"
},
"children": [{
"name": "James",
"class": "non-root"
}]
}]
}]
{{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;
}
.root {
background-color: lightblue;
border-style: solid;
border-width: 1px;
}
.non-root {
background-color: white;
border-style: solid;
border-width: 1px;
}
.emphasis{
font-style: italic;
}
p {
padding:0;
margin:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment