Skip to content

Instantly share code, notes, and snippets.

@tizon9804

tizon9804/.block

Last active November 19, 2016 17:17
Show Gist options
  • Save tizon9804/b83ab0a50cd356a894a27b84949bce02 to your computer and use it in GitHub Desktop.
Save tizon9804/b83ab0a50cd356a894a27b84949bce02 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
/* set the CSS */
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.node--internal text {
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
</style>
</head>
<body>
<div id="tree-container"></div>
<script>
var treeData =
{
"name": "Universidad de los Andes",
"value": 1,
"type": "black",
"level": "red",
"children": [
{
"name": "pregrado",
"value": 1,
"type": "grey",
"level": "red",
"children": [
{
"name": "falcultad",
"value": 1,
"type": "steelblue",
"level": "orange"
},
{
"name": "sisrema",
"value": 1,
"type": "steelblue",
"level": "red"
}
]
},
{
"name": "maestria",
"value": 1,
"type": "grey",
"level": "green"
}
]
};
//---------------------------------------------------------------------------------
//---------------------------------------------------------------------------------
//---------------------------------------------------------------------------------
var margin = {top: 0, right: 50, bottom: 0, left:50}
var viewerWidth = $(document).width();
var viewerHeight = $(document).height();
var duration = 750;
var tree=d3.tree()
.size([viewerWidth,viewerHeight]);
function zoomed() {
g.attr("transform", d3.event.transform);
//The zoom and panning is affecting my G element which is a child of SVG
}
// define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
var zoom = d3.zoom()
.scaleExtent([0.3,2])
.on("zoom", zoomed);
//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------
var baseSvg = d3.select("#tree-container").append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight)
.attr("class", "overlay")
.call(zoom);
g = baseSvg.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
function centerNode(source) {
t = zoom.scaleExtent();
console.log(source);
x = t[0];
y = source.x;
y = -y *t[1] + viewerHeight / 2;
g.transition()
.duration(duration)
.attr("transform", "translate(" + x + "," + y + ")scale(" + t[1] + ")");
}
// Toggle children function
function toggleChildren(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else if (d._children) {
d.children = d._children;
d._children = null;
}
return d;
}
// Toggle children on click.
function click(d) {
if (d3.event.defaultPrevented) return; // click suppressed
d = toggleChildren(d);
update(d);
// centerNode(d);
}
//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------
function update(treeData)
{
console.log(treeData);
// assigns the data to a hierarchy using parent-child relationships
var nodes = d3.hierarchy(treeData, function(d) {
return d.children;
});
nodes = tree(nodes);
//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------
var link = g.selectAll(".link")
.data( nodes.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.style("stroke", function(d) { return d.data.level; })
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.y + d.parent.y) / 2 + "," + d.x
+ " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});
//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------
var node = g.selectAll(".node")
.data(nodes.descendants())
.enter().append("g")
.attr("class", function(d) {
return "node" +
(d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; })
.on('click',click);
//---------------------------------------------------------------------------------
// adds symbols as nodes
node.append("path")
.style("stroke", function(d) { return d.data.type; })
.style("fill", function(d) { return d.data.level; })
.attr("d", d3.symbol()
.size(function(d) { return d.data.value * 700; } )
.type(function(d) { return d3.symbolSquare;
}));
//---------------------------------------------------------------------------------
// adds the text to the node
node.append("text")
.attr("dy", ".35em")
.attr("x", function(d) { return d.children ?
(d.data.value + 4) * -1 : d.data.value + 4 })
.style("text-anchor", function(d) {
return d.children ? "end" : "start"; })
.text(function(d) { return d.data.name; });
//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
});
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
}
//---------------------------------------------------------------------------------//---------------------------------------------------------------------------------
update(treeData);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment