d3-dtree
Version:
A library for visualizing data trees built on top of D3.
87 lines (83 loc) • 1.83 kB
HTML
<html lang="en">
<meta charset="utf-8">
<style type="text/css">
body {
font: 10px sans-serif;
}
.linage {
fill: none;
stroke: #000;
}
.marriage {
fill: none;
stroke: black;
}
.marriageNode {
background-color: black;
border-radius: 50%;
}
.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>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="dTree.min.js"></script>
<body>
<h1>Demo</h1>
<div id="graph"></div>
<script>
treeJson = d3.json("data.json", function(error, treeData) {
dTree.init(treeData,
{
target: "#graph",
debug: true,
hideMarriageNodes: true,
marriageNodeSize: 5,
height: 800,
width: 1200,
callbacks: {
nodeClick: function(name, extra) {
alert('Click: ' + name);
},
nodeRightClick: function(name, extra) {
alert('Right-click: ' + name);
},
textRenderer: function(name, extra, textClass) {
if (extra && extra.nickname)
name = name + " (" + extra.nickname + ")";
return "<p align='center' class='" + textClass + "'>" + name + "</p>";
},
marriageClick: function(extra, id) {
alert('Clicked marriage node' + id);
},
marriageRightClick: function(extra, id) {
alert('Right-clicked marriage node' + id);
},
}
});
});
</script>
</body>
</html>