Skip to content

Instantly share code, notes, and snippets.

@kaleguy

kaleguy/.block

Forked from d3noob/.block
Last active March 6, 2017 09:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kaleguy/57266b6fff9f864403e007e9efd06401 to your computer and use it in GitHub Desktop.
Save kaleguy/57266b6fff9f864403e007e9efd06401 to your computer and use it in GitHub Desktop.
Download ZIP
Collapsible tree diagram in v4 from Leo file
Raw
.block
license: MIT
height: 480
border: yes
Raw
readme.md

This is a demo of using Leo (open source outline editor + IDE) to create content for a tree diagram. This snippet just displays the outline of a Leo tree.

This was forked from the d3.js tree diagram in the book D3 Tips and Tricks v4.x.

Any parent node can be clicked on to collapse the portion of the tree below it, on itself. Conversly, it can be clicked on again to regrow.

Raw
example.leo
<?xml version="1.0" encoding="utf-8"?>
<!-- Created by Leo: http://leoeditor.com/leo_toc.html -->
<leo_file xmlns:leo="http://leoeditor.com/namespaces/leo-python-editor/1.1" >
<leo_header file_format="2" tnodes="0" max_tnode_index="0" clone_windows="0"/>
<globals body_outline_ratio="0.5" body_secondary_ratio="0.5">
<global_window_position top="50" left="50" height="500" width="700"/>
<global_log_window_position top="0" left="0" height="0" width="0"/>
</globals>
<preferences/>
<find_panel_settings/>
<vnodes>
<v t="josephorr.20170228222411.2" a="E"><vh>Top</vh>
<v t="josephorr.20170228222452.1"><vh>Regions</vh>
<v t="josephorr.20170228222513.1"><vh>North America</vh>
<v t="josephorr.20170228225033.1"><vh>Canada</vh></v>
<v t="josephorr.20170228225040.1"><vh>USA</vh></v>
</v>
<v t="josephorr.20170228222521.1" a="E"><vh>South America</vh>
<v t="josephorr.20170228224939.1"><vh>Bolivia</vh></v>
<v t="josephorr.20170228224946.1"><vh>Brazil</vh></v>
</v>
<v t="josephorr.20170228222526.1" a="E"><vh>Europe</vh>
<v t="josephorr.20170228224925.1"><vh>France</vh></v>
<v t="josephorr.20170228224930.1"><vh>Italy</vh></v>
</v>
</v>
<v t="josephorr.20170228222534.1"><vh>Vegetables</vh>
<v t="josephorr.20170228222538.1"><vh>Broccoli</vh></v>
<v t="josephorr.20170228222548.1"><vh>Spinach</vh></v>
</v>
</v>
</vnodes>
<tnodes>
<t tx="josephorr.20170228222411.2"></t>
<t tx="josephorr.20170228222452.1"></t>
<t tx="josephorr.20170228222513.1"></t>
<t tx="josephorr.20170228222521.1"></t>
<t tx="josephorr.20170228222526.1"></t>
<t tx="josephorr.20170228222534.1"></t>
<t tx="josephorr.20170228222538.1"></t>
<t tx="josephorr.20170228222548.1"></t>
<t tx="josephorr.20170228224925.1"></t>
<t tx="josephorr.20170228224930.1"></t>
<t tx="josephorr.20170228224939.1"></t>
<t tx="josephorr.20170228224946.1"></t>
<t tx="josephorr.20170228225033.1"></t>
<t tx="josephorr.20170228225040.1"></t>
</tnodes>
</leo_file>
Raw
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
function loadXMLDoc(filename, type){
var xhttp = new XMLHttpRequest();
xhttp.open('GET', filename, false); // synchronous
xhttp.send('');
return xhttp['response' + type];
}
var xmlString = loadXMLDoc('example.leo', 'Text');
var oParser = new DOMParser();
var xml = oParser.parseFromString(xmlString,'text/xml');
var xsl = loadXMLDoc('leo.xsl', 'XML');
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
var resultDocument = xsltProcessor.transformToFragment(xml, document);
var data = resultDocument.textContent;
data = data.replace(/,\s+$/,''); // kludge to get rid of trailing comma
treeData = JSON.parse(data);
// Set the dimensions and margins of the diagram
var margin = {top: 20, right: 90, bottom: 30, left: 90},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate("
+ margin.left + "," + margin.top + ")");
var i = 0,
duration = 750,
root;
// declares a tree layout and assigns the size
var treemap = d3.tree().size([height, width]);
// Assigns parent, children, height, depth
root = d3.hierarchy(treeData, function(d) { return d.children; });
root.x0 = height / 2;
root.y0 = 0;
// Collapse after the second level
root.children.forEach(collapse);
update(root);
// Collapse the node and all it's children
function collapse(d) {
if(d.children) {
d._children = d.children
d._children.forEach(collapse)
d.children = null
}
}
function update(source) {
// Assigns the x and y position for the nodes
var treeData = treemap(root);
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
// Normalize for fixed-depth.
nodes.forEach(function(d){ d.y = d.depth * 180});
// ****************** Nodes section ***************************
// Update the nodes...
var node = svg.selectAll('g.node')
.data(nodes, function(d) {return d.id || (d.id = ++i); });
// Enter any new modes at the parent's previous position.
var nodeEnter = node.enter().append('g')
.attr('class', 'node')
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on('click', click);
// Add Circle for the nodes
nodeEnter.append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
});
// Add labels for the nodes
nodeEnter.append('text')
.attr("dy", ".35em")
.attr("x", function(d) {
return d.children || d._children ? -13 : 13;
})
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
})
.text(function(d) { return d.data.name; });
// UPDATE
var nodeUpdate = nodeEnter.merge(node);
// Transition to the proper position for the node
nodeUpdate.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
});
// Update the node attributes and style
nodeUpdate.select('circle.node')
.attr('r', 10)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
})
.attr('cursor', 'pointer');
// Remove any exiting nodes
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
// On exit reduce the node circles size to 0
nodeExit.select('circle')
.attr('r', 1e-6);
// On exit reduce the opacity of text labels
nodeExit.select('text')
.style('fill-opacity', 1e-6);
// ****************** links section ***************************
// Update the links...
var link = svg.selectAll('path.link')
.data(links, function(d) { return d.id; });
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr('d', function(d){
var o = {x: source.x0, y: source.y0}
return diagonal(o, o)
});
// UPDATE
var linkUpdate = linkEnter.merge(link);
// Transition back to the parent element position
linkUpdate.transition()
.duration(duration)
.attr('d', function(d){ return diagonal(d, d.parent) });
// Remove any exiting links
var linkExit = link.exit().transition()
.duration(duration)
.attr('d', function(d) {
var o = {x: source.x, y: source.y}
return diagonal(o, o)
})
.remove();
// Store the old positions for transition.
nodes.forEach(function(d){
d.x0 = d.x;
d.y0 = d.y;
});
// Creates a curved (diagonal) path from parent to the child nodes
function diagonal(s, d) {
path = `M ${s.y} ${s.x}
C ${(s.y + d.y) / 2} ${s.x},
${(s.y + d.y) / 2} ${d.x},
${d.y} ${d.x}`
return path
}
// 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);
}
}
</script>
</body>
Raw
leo.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="v">
<xsl:variable name="t" select="@t"/>
{
"name":"<xsl:value-of select="vh"/>",
"text":"<xsl:value-of select="//t[@tx=$t]"/>",
"children":[<xsl:apply-templates select="v"/>]
}
<xsl:if test="position()!=last()">,</xsl:if>
</xsl:template>
<xsl:template match="text()"><xsl:value-of select="."/></xsl:template>
</xsl:stylesheet>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment