Skip to content

Instantly share code, notes, and snippets.

@tomhaymore

tomhaymore/index.html

Created September 28, 2011 22:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tomhaymore/1249394 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tomhaymore/1249394 to your computer and use it in GitHub Desktop.
Download ZIP
Collapsible Animated Indented Tree . . . Working!
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Node-Link Tree</title>
<link href="interactive_tree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 960,
h = 2000,
i = 0,
duration = 500,
root;
var tree = d3.layout.tree()
.size([h, w - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(40,0)");
d3.json("math_map_compact.json", function(json) {
json.x0 = 800;
json.y0 = 0;
update(root = json);
});
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
console.log(nodes)
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });
//.style("opacity", 1e-6);
// Enter any new nodes at the parent's previous position.
nodeEnter.append("svg:circle")
//.attr("class", "node")
//.attr("cx", function(d) { return source.x0; })
//.attr("cy", function(d) { return source.y0; })
.attr("r", 4.5)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
.on("click", click);
nodeEnter.append("svg:text")
.attr("x", function(d) { return d._children ? -8 : 8; })
.attr("y", 3)
//.attr("fill","#ccc")
//.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.text(function(d) { return d.name; });
// Transition nodes to their new position.
nodeEnter.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1)
.select("circle")
//.attr("cx", function(d) { return d.x; })
//.attr("cy", function(d) { return d.y; })
.style("fill", "lightsteelblue");
node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1);
node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.style("opacity", 1e-6)
.remove();
/*
var nodeTransition = node.transition()
.duration(duration);
nodeTransition.select("circle")
.attr("cx", function(d) { return d.y; })
.attr("cy", function(d) { return d.x; })
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeTransition.select("text")
.attr("dx", function(d) { return d._children ? -8 : 8; })
.attr("dy", 3)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#5babfc"; });
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit();
nodeExit.select("circle").transition()
.duration(duration)
.attr("cx", function(d) { return source.y; })
.attr("cy", function(d) { return source.x; })
.remove();
nodeExit.select("text").transition()
.duration(duration)
.remove();
*/
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
d3.select(self.frameElement).style("height", "2000px");
</script>
</body>
</html>
Raw
interactive_tree.css
circle {
cursor: pointer;
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
text {
font-size:10px;
}
path.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
Raw
math_map_compact.json
{
"name": "MAT",
"children": [
{
"name": "TRI",
"children": [
{
"name": "Right Triangles and an Introduction to Trigonometry",
"children": [
{
"name": "The Pythagorean Theorem"
},
{
"name": "Special Right Triangles"
},
{
"name": "Basic Trigonometric Functions"
},
{
"name": "Solving Right Triangles"
},
{
"name": "Measuring Rotation"
},
{
"name": "Applying Trig Functions to Angles of Rotation"
},
{
"name": "Trigonometric Functions of Any Angle"
}
]
},
{
"name": "Graphing Trigonometric Functions - 2nd edition",
"children": [
{
"name": "Relating Trigonometric Functions"
},
{
"name": "Radian Measure"
},
{
"name": "Applications of Radian Measure"
},
{
"name": "Circular Functions of Real Numbers"
},
{
"name": "Translating Sine and Cosine Functions"
},
{
"name": "Amplitude, Period and Frequency"
},
{
"name": "General Sinusoidal Graphs"
}
]
},
{
"name": "Trigonometric Identities and Equations - 2nd edition",
"children": [
{
"name": "Graphing Tangent, Cotangent, Secant, and Cosecant"
},
{
"name": "Fundamental Identities"
},
{
"name": "Proving Identities"
},
{
"name": "Solving Trigonometric Equations"
},
{
"name": "Sum and Difference Identities"
},
{
"name": "Double Angle Identities"
},
{
"name": "Half-Angle Identities"
}
]
},
{
"name": "Inverse Trigonometric Functions - 2nd edition",
"children": [
{
"name": "Products, Sums, Linear Combinations, and Applications"
},
{
"name": "Basic Inverse Trigonometric Functions"
},
{
"name": "Graphing Inverse Trigonometric Functions"
},
{
"name": "Inverse Trigonometric Properties"
}
]
},
{
"name": "Triangles and Vectors",
"children": [
{
"name": "Applications & Models"
},
{
"name": "The Law of Cosines"
},
{
"name": "Area of a Triangle"
},
{
"name": "The Law of Sines"
},
{
"name": "The Ambiguous Case"
},
{
"name": "General Solutions of Triangles"
},
{
"name": "Vectors"
}
]
}
]
},
{
"name": "ALG",
"children": [
{
"name": "Equations and Functions",
"children": [
{
"name": "Variable Expressions"
},
{
"name": "Order of Operations"
},
{
"name": "Patterns and Equations"
},
{
"name": "Equations and Inequalities"
},
{
"name": "Functions as Rules and Tables"
},
{
"name": "Functions as Graphs"
},
{
"name": "Problem-Solving Plan"
}
]
},
{
"name": "Real Numbers",
"children": [
{
"name": "Problem-Solving Strategies: Make a Table and Look for a Pattern"
},
{
"name": "Integers and Rational Numbers"
},
{
"name": "Adding and Subtracting Rational Numbers"
},
{
"name": "Multiplying and Dividing Rational Numbers"
},
{
"name": "The Distributive Property"
},
{
"name": "Square Roots and Real Numbers"
}
]
},
{
"name": "Equations of Lines",
"children": [
{
"name": "Problem-Solving Strategies: Guess and Check, Work Backward"
},
{
"name": "One-Step Equations"
},
{
"name": "Two-Step Equations"
},
{
"name": "Multi-Step Equations"
},
{
"name": "Equations with Variables on Both Sides"
},
{
"name": "Ratios and Proportions"
}
]
},
{
"name": "Graphs of Equations and Functions",
"children": [
{
"name": "Percent Problems"
},
{
"name": "The Coordinate Plane"
},
{
"name": "Graphs of Linear Equations"
},
{
"name": "Graphing Using Intercepts"
},
{
"name": "Slope and Rate of Change"
},
{
"name": "Graphs Using Slope-Intercept Form"
},
{
"name": "Direct Variation Models"
},
{
"name": "Linear Function Graphs"
}
]
},
{
"name": "Writing Linear Equations",
"children": [
{
"name": "Problem-Solving Strategies - Graphs"
},
{
"name": "Forms of Linear Equations"
},
{
"name": "Equations of Parallel and Perpendicular Lines"
},
{
"name": "Fitting a Line to Data"
}
]
},
{
"name": "Linear Inequalities",
"children": [
{
"name": "Predicting with Linear Models"
},
{
"name": "Solving Inequalities"
},
{
"name": "Using Inequalities"
},
{
"name": "Compound Inequalities"
},
{
"name": "Absolute Value Equations and Inequalities"
}
]
},
{
"name": "Solving Systems of Equations and Inequalities",
"children": [
{
"name": "Linear Inequalities in Two Variables"
},
{
"name": "Linear Systems by Graphing"
},
{
"name": "Solving Linear Systems by Substitution"
},
{
"name": "Solving Linear Systems by Elimination"
},
{
"name": "Special Types of Linear Systems"
}
]
},
{
"name": "Exponential Functions",
"children": [
{
"name": "Systems of Linear Inequalities"
},
{
"name": "Exponent Properties Involving Products"
},
{
"name": "Exponent Properties Involving Quotients"
},
{
"name": "Zero, Negative, and Fractional Exponents"
},
{
"name": "Scientific Notation"
},
{
"name": "Geometric Sequences"
},
{
"name": "Exponential Functions"
}
]
},
{
"name": "Polynomials",
"children": [
{
"name": "Applications of Exponential Functions"
},
{
"name": "Addition and Subtraction of Polynomials"
},
{
"name": "Multiplication of Polynomials"
},
{
"name": "Special Products of Polynomials"
},
{
"name": "Polynomial Equations in Factored Form"
},
{
"name": "Factoring Quadratic Expressions"
},
{
"name": "Factoring Special Products"
}
]
},
{
"name": "Quadratic Equations and Quadratic Functions",
"children": [
{
"name": "Factoring Polynomials Completely"
},
{
"name": "Graphs of Quadratic Functions"
},
{
"name": "Quadratic Equations by Graphing"
},
{
"name": "Quadratic Equations by Square Roots"
},
{
"name": "Solving Quadratic Equations by Completing the Square"
},
{
"name": "Solving Quadratic Equations by the Quadratic Formula"
},
{
"name": "The Discriminant"
}
]
},
{
"name": "Algebra and Geometry Connections",
"children": [
{
"name": "Linear, Exponential and Quadratic Models"
},
{
"name": "Graphs of Square Root Functions"
},
{
"name": "Radical Expressions"
},
{
"name": "Radical Equations"
},
{
"name": "The Pythagorean Theorem and Its Converse"
}
]
}
]
}
]
}
@basilweibel
Copy link

basilweibel commented Jul 15, 2012

Is it possible to add a picture to every node (i.e. instead of the blue little circles or next to the text or instead of the text). If yes, how could it be done?

Many thanks!

@Mudilescovich
Copy link

Mudilescovich commented May 16, 2013

hi , i am not a developer , can any one please help in a script or developing family tree website please ?
adnannazzal [ at ] elin.jo

@prasadtakale
Copy link

prasadtakale commented Jun 14, 2013

Can we covert this tree structure to cluster(circular) structure?

@gopinath0072
Copy link

gopinath0072 commented Jun 19, 2013

This not working in IE8 and Chrome, anyone please help me to rectify that issue and how can we add the z-index?

@rajasekhariitbbs
Copy link

rajasekhariitbbs commented May 21, 2014

There is some issue in the code in updating the nodes http://bl.ocks.org/tchaymore/1249394
If I go back to the parent node twice I'm unable to go down further into the child.

For example assume the tree looks like A--------->B------------->C
If I click B, the updated tree is A--------->B
and If I click A, the updated tree is A
Now If I want to go back to see C, the code is not function, Could you please look into it, I tried to fix it but I'm unable to do it. Once if it is done I will let you know.

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