|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>JSON into tree layout</title> <!-- http://bl.ocks.org/anotherjavadude/2964485 --> |
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
|
|
|
<style> |
|
|
|
body {font-family: monospace; line-height: 160%; font-size: 18px; } |
|
|
|
svg { |
|
font: 14px monospace; |
|
fill : #333; |
|
} |
|
.link { |
|
fill: none; |
|
stroke: #eee; |
|
stroke-width: 1.5px; |
|
} |
|
button {border: 1px dotted #ccc; background: white; font-family: monospace; padding: 10px 20px; font-size: 18px; margin: 20px 10px 20px 0; color: red;} |
|
button:focus { background-color:yellow; outline: none;} |
|
nav {display: block; position: fixed; left: 10px; top: 10px; background: transparent; ;} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<nav> |
|
<button id="tree">Tree</button> |
|
<button id="cluster">Cluster</button> |
|
</nav> |
|
|
|
<div id="viz"></div> |
|
|
|
<script type="text/javascript"> |
|
|
|
//JSON object with the data |
|
var treeData = {"name" : "ROOT", "info" : "test", "children" : [ |
|
{"name" : "A", "children" : [ |
|
{"name" : "A 01" }, |
|
{"name" : "A 02" }, |
|
{"name" : "A 03" }, |
|
{"name" : "A 04" }, |
|
{"name" : "A 05" } |
|
] }, |
|
{"name" : "B", "children" : [ |
|
{"name" : "B 01" }, |
|
{"name" : "B 02", "children" : [ |
|
{"name" : "B 02.1" }, |
|
{"name" : "B 02.2" }, |
|
{"name" : "B 02.3" }, |
|
{"name" : "B 02.4" } |
|
]}, |
|
{"name" : "B 03" }, |
|
{"name" : "B 04" }, |
|
{"name" : "B 05" }] }, |
|
{"name" : "C", "children": [ |
|
{"name" : "C 01", "children" :[ |
|
{"name" : "C 01.1" }, |
|
{"name" : "C 01.2" }, |
|
{"name" : "C 01.3" }, |
|
{"name" : "C 01.4" }, |
|
{"name" : "C 01.5" } |
|
]}] }, |
|
{"name" : "D", "children" : [ |
|
{"name" : "D 01" }, |
|
{"name" : "D 02" }, |
|
{"name" : "D 03", "children" : [ |
|
{"name" : "D 03.1" }, |
|
{"name" : "D 03.2" } |
|
]}, |
|
{"name" : "D 04" } |
|
] } |
|
]}; |
|
|
|
// width and height |
|
var w = 900; |
|
var h = 500; |
|
|
|
update(2); |
|
|
|
d3.select("#tree") |
|
.on("click", function(d,i) { |
|
update(2)}); |
|
d3.select("#cluster") |
|
.on("click", function(d,i) { |
|
update(1)}); |
|
|
|
|
|
function update(type) { |
|
|
|
d3.select("svg") |
|
.remove(); |
|
|
|
// Create a svg canvas |
|
var vis = d3.select("#viz").append("svg:svg") |
|
.attr("width", w) |
|
.attr("height", h) |
|
.append("svg:g") |
|
.attr("transform", "translate(60, 0)"); |
|
|
|
|
|
if (type==1) |
|
var layout = d3.layout.cluster().size([h,w-100]); |
|
else |
|
var layout = d3.layout.tree().size([h,w-100]); |
|
|
|
var diagonal = d3.svg.diagonal() |
|
// change x and y (for the left to right tree) |
|
.projection(function(d) { return [d.y, d.x]; }); |
|
|
|
// Preparing the data for the tree layout, convert data into an array of nodes |
|
var nodes = layout.nodes(treeData); |
|
// Create an array with all the links |
|
var links = layout.links(nodes); |
|
|
|
var link = vis.selectAll("pathlink") |
|
.data(links) |
|
.enter().append("svg:path") |
|
.attr("class", "link") |
|
.attr("d", diagonal) |
|
|
|
var node = vis.selectAll("g.node") |
|
.data(nodes) |
|
.enter().append("svg:g") |
|
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) |
|
|
|
// Add the dot at every node |
|
node.append("svg:circle") |
|
.attr("r", 1.5); |
|
|
|
// place the name attribute left or right depending if children |
|
node.append("svg:text") |
|
.attr("dx", function(d) { return d.children ? -8 : 8; }) |
|
.attr("dy", 3) |
|
.attr("text-anchor", function(d) { return d.children ? "end" : "start"; }) |
|
.text(function(d) { return d.name; }); |
|
} |
|
|
|
</script> |
|
</body> |
|
</html> |
