reorganización
This commit is contained in:
parent
af06e87e74
commit
2a97a34d87
10 changed files with 616 additions and 11 deletions
4
README.org~
Normal file
4
README.org~
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
# Mapas mentales
|
||||||
|
|
||||||
|
Este repositorio se compone de cuatro archivos aparte del actual:
|
||||||
|
- `madrid-destino.json
|
||||||
113
Readme.org
Normal file
113
Readme.org
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
Estructuras creadas para los diagramas de mapas mentales
|
||||||
|
|
||||||
|
* Presidente
|
||||||
|
** Consejero delegado
|
||||||
|
** Dirección General de Contenidos y espacios culturales
|
||||||
|
*** Actividades culturales
|
||||||
|
** Departamentos
|
||||||
|
*** Financiero y ventas
|
||||||
|
**** Presupuestos y control financiero
|
||||||
|
**** Administración y encomiendas
|
||||||
|
**** Ventas y patrocinio
|
||||||
|
**** Alquileres
|
||||||
|
*** Legal
|
||||||
|
**** Contratación
|
||||||
|
**** Protección de datos, marcas y patentes
|
||||||
|
*** Recursos humanos
|
||||||
|
**** Relaciones laborales
|
||||||
|
**** Administración de personal
|
||||||
|
**** Planificación, organización y prevención de riesgos
|
||||||
|
**** Gestión rrhh
|
||||||
|
*** Seguridad y emergencias
|
||||||
|
**** Seguridad
|
||||||
|
**** Viabilidad técnica
|
||||||
|
**** Coordinación de actividades empresariales y planes de autopromoción
|
||||||
|
**** Producción de eventos
|
||||||
|
*** Infraestructuras
|
||||||
|
**** Proyectos y obras
|
||||||
|
**** Mantenimiento y servicio
|
||||||
|
**** Asesoramiento técnico
|
||||||
|
*** Coordinación general
|
||||||
|
**** Estrategia
|
||||||
|
**** Servicios generales
|
||||||
|
**** Secretaría y gestión documental, Tecnología
|
||||||
|
*** Comunicación y marketing
|
||||||
|
**** Comunicación
|
||||||
|
**** Publicidad
|
||||||
|
**** Identidad gráfica y audiovisual
|
||||||
|
*** Espacios culturales
|
||||||
|
**** Programación cultural
|
||||||
|
**** Teatros
|
||||||
|
***** Teatro Español y Naves
|
||||||
|
***** Teatro Fernán Gómez
|
||||||
|
***** Teatro Circo Price
|
||||||
|
**** Daoiz y Velarde
|
||||||
|
**** CentroCentro
|
||||||
|
**** Conde Duque
|
||||||
|
**** Medialab-Prado
|
||||||
|
**** Matadero
|
||||||
|
***** Intermediae
|
||||||
|
***** Cineteca
|
||||||
|
*** Turismo
|
||||||
|
**** Promoción turística
|
||||||
|
**** Marketing turístico y partenariado
|
||||||
|
**** Madrid Convention Bureau
|
||||||
|
**** Atención, información y proyectos turísticos.
|
||||||
|
**** Desarrollo tecnológico y audiovisual
|
||||||
|
* Madrid Destino
|
||||||
|
** Presidente
|
||||||
|
** Consejero delegado
|
||||||
|
** Dirección General de Contenidos y espacios culturales
|
||||||
|
*** Actividades culturales
|
||||||
|
** Departamentos
|
||||||
|
*** Financiero y ventas
|
||||||
|
**** Presupuestos y control financiero
|
||||||
|
**** Administración y encomiendas
|
||||||
|
**** Ventas y patrocinio
|
||||||
|
**** Alquileres
|
||||||
|
*** Legal
|
||||||
|
**** Contratación
|
||||||
|
**** Protección de datos, marcas y patentes
|
||||||
|
*** Recursos humanos
|
||||||
|
**** Relaciones laborales
|
||||||
|
**** Administración de personal
|
||||||
|
**** Planificación, organización y prevención de riesgos
|
||||||
|
**** Gestión rrhh
|
||||||
|
*** Seguridad y emergencias
|
||||||
|
**** Seguridad
|
||||||
|
**** Viabilidad técnica
|
||||||
|
**** Coordinación de actividades empresariales y planes de autopromoción
|
||||||
|
**** Producción de eventos
|
||||||
|
*** Infraestructuras
|
||||||
|
**** Proyectos y obras
|
||||||
|
**** Mantenimiento y servicio
|
||||||
|
**** Asesoramiento técnico
|
||||||
|
*** Coordinación general
|
||||||
|
**** Estrategia
|
||||||
|
**** Servicios generales
|
||||||
|
**** Secretaría y gestión documental, Tecnología
|
||||||
|
*** Comunicación y marketing
|
||||||
|
**** Comunicación
|
||||||
|
**** Publicidad
|
||||||
|
**** Identidad gráfica y audiovisual
|
||||||
|
*** Espacios culturales
|
||||||
|
**** Programación cultural
|
||||||
|
**** Teatros
|
||||||
|
***** Teatro Español y Naves
|
||||||
|
***** Teatro Fernán Gómez
|
||||||
|
***** Teatro Circo Price
|
||||||
|
**** Daoiz y Velarde
|
||||||
|
**** CentroCentro
|
||||||
|
**** Conde Duque
|
||||||
|
**** Medialab-Prado
|
||||||
|
**** Matadero
|
||||||
|
***** Intermediae
|
||||||
|
***** Cineteca
|
||||||
|
*** Turismo
|
||||||
|
**** Promoción turística
|
||||||
|
**** Marketing turístico y partenariado
|
||||||
|
**** Madrid Convention Bureau
|
||||||
|
**** Atención, información y proyectos turísticos.
|
||||||
|
**** Desarrollo tecnológico y audiovisual
|
||||||
|
|
||||||
|
|
||||||
54
Readme.org~
Normal file
54
Readme.org~
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
* Presidente
|
||||||
|
** Consejero delegado
|
||||||
|
** Dirección General de Contenidos y espacios culturales
|
||||||
|
*** Actividades culturales
|
||||||
|
** Departamentos
|
||||||
|
*** Financiero y ventas
|
||||||
|
**** Presupuestos y control financiero
|
||||||
|
**** Administración y encomiendas
|
||||||
|
**** Ventas y patrocinio
|
||||||
|
**** Alquileres
|
||||||
|
*** Legal
|
||||||
|
**** Contratación
|
||||||
|
**** Protección de datos, marcas y patentes
|
||||||
|
*** Recursos humanos
|
||||||
|
**** Relaciones laborales
|
||||||
|
**** Administración de personal
|
||||||
|
**** Planificación, organización y prevención de riesgos
|
||||||
|
**** Gestión rrhh
|
||||||
|
*** Seguridad y emergencias
|
||||||
|
**** Seguridad
|
||||||
|
**** Viabilidad técnica
|
||||||
|
**** Coordinación de actividades empresariales y planes de autopromoción
|
||||||
|
**** Producción de eventos
|
||||||
|
*** Infraestructuras
|
||||||
|
**** Proyectos y obras
|
||||||
|
**** Mantenimiento y servicio
|
||||||
|
**** Asesoramiento técnico
|
||||||
|
*** Coordinación general
|
||||||
|
**** Estrategia
|
||||||
|
**** Servicios generales
|
||||||
|
**** Secretaría y gestión documental, Tecnología
|
||||||
|
*** Comunicación y marketing
|
||||||
|
**** Comunicación
|
||||||
|
**** Publicidad
|
||||||
|
**** Identidad gráfica y audiovisual
|
||||||
|
*** Espacios culturales
|
||||||
|
**** Programación cultural
|
||||||
|
**** Teatros
|
||||||
|
***** Teatro Español y Naves
|
||||||
|
***** Teatro Fernán Gómez
|
||||||
|
***** Teatro Circo Price
|
||||||
|
**** Daoiz y Velarde
|
||||||
|
**** CentroCentro
|
||||||
|
**** Conde Duque
|
||||||
|
**** Medialab-Prado
|
||||||
|
**** Matadero
|
||||||
|
***** Intermediae
|
||||||
|
***** Cineteca
|
||||||
|
*** Turismo
|
||||||
|
**** Promoción turística
|
||||||
|
**** Marketing turístico y partenariado
|
||||||
|
**** Madrid Convention Bureau
|
||||||
|
**** Atención, información y proyectos turísticos.
|
||||||
|
**** Desarrollo tecnológico y audiovisual
|
||||||
174
d3js.html
Normal file
174
d3js.html
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Estructura de Madrid-Destino 2016</title>
|
||||||
|
<link type="text/css" rel="stylesheet" href="style.css"/>
|
||||||
|
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
.node circle {
|
||||||
|
cursor: pointer;
|
||||||
|
fill: #fff;
|
||||||
|
stroke: steelblue;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node text {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
path.link {
|
||||||
|
fill: none;
|
||||||
|
stroke: #ccc;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="body">
|
||||||
|
<h1>Estructura de Madrid Destino</h1>
|
||||||
|
<div id="footer">
|
||||||
|
<p>Realizado con <a href="https://github.com/vchatterji/opml2json">opml2json</a></p>
|
||||||
|
<div class="hint"><p>pincha para expandir o colapsar</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var m = [20, 120, 20, 120],
|
||||||
|
w = 1280 - m[1] - m[3],
|
||||||
|
h = 800 - m[0] - m[2],
|
||||||
|
i = 0,
|
||||||
|
root;
|
||||||
|
|
||||||
|
var tree = d3.layout.tree()
|
||||||
|
.size([h, w]);
|
||||||
|
|
||||||
|
var diagonal = d3.svg.diagonal()
|
||||||
|
.projection(function(d) { return [d.y, d.x]; });
|
||||||
|
|
||||||
|
var vis = d3.select("#body").append("svg:svg")
|
||||||
|
.attr("width", w + m[1] + m[3])
|
||||||
|
.attr("height", h + m[0] + m[2])
|
||||||
|
.append("svg:g")
|
||||||
|
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||||
|
|
||||||
|
d3.json("madrid-destino.json", function(json) {
|
||||||
|
root = json;
|
||||||
|
root.x0 = h / 2;
|
||||||
|
root.y0 = 0;
|
||||||
|
|
||||||
|
function toggleAll(d) {
|
||||||
|
if (d.children) {
|
||||||
|
d.children.forEach(toggleAll);
|
||||||
|
toggle(d);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the display to show a few nodes.
|
||||||
|
root.children.forEach(toggleAll);
|
||||||
|
|
||||||
|
update(root);
|
||||||
|
});
|
||||||
|
|
||||||
|
function update(source) {
|
||||||
|
var duration = d3.event && d3.event.altKey ? 5000 : 500;
|
||||||
|
|
||||||
|
// Compute the new tree layout.
|
||||||
|
var nodes = tree.nodes(root).reverse();
|
||||||
|
|
||||||
|
// Normalize for fixed-depth.
|
||||||
|
nodes.forEach(function(d) { d.y = d.depth * 180; });
|
||||||
|
|
||||||
|
// Update the nodes…
|
||||||
|
var node = vis.selectAll("g.node")
|
||||||
|
.data(nodes, function(d) { return d.id || (d.id = ++i); });
|
||||||
|
|
||||||
|
// Enter any new nodes at the parent's previous position.
|
||||||
|
var nodeEnter = node.enter().append("svg:g")
|
||||||
|
.attr("class", "node")
|
||||||
|
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
|
||||||
|
.on("click", function(d) { toggle(d); update(d); });
|
||||||
|
|
||||||
|
nodeEnter.append("svg:circle")
|
||||||
|
.attr("r", 1e-6)
|
||||||
|
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
|
||||||
|
|
||||||
|
nodeEnter.append("svg:text")
|
||||||
|
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
|
||||||
|
.attr("dy", ".35em")
|
||||||
|
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
|
||||||
|
.text(function(d) { return d.name; })
|
||||||
|
.style("fill-opacity", 1e-6);
|
||||||
|
|
||||||
|
// Transition nodes to their new position.
|
||||||
|
var nodeUpdate = node.transition()
|
||||||
|
.duration(duration)
|
||||||
|
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
|
||||||
|
|
||||||
|
nodeUpdate.select("circle")
|
||||||
|
.attr("r", 4.5)
|
||||||
|
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
|
||||||
|
|
||||||
|
nodeUpdate.select("text")
|
||||||
|
.style("fill-opacity", 1);
|
||||||
|
|
||||||
|
// Transition exiting nodes to the parent's new position.
|
||||||
|
var nodeExit = node.exit().transition()
|
||||||
|
.duration(duration)
|
||||||
|
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
|
||||||
|
.remove();
|
||||||
|
|
||||||
|
nodeExit.select("circle")
|
||||||
|
.attr("r", 1e-6);
|
||||||
|
|
||||||
|
nodeExit.select("text")
|
||||||
|
.style("fill-opacity", 1e-6);
|
||||||
|
|
||||||
|
// 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.
|
||||||
|
function toggle(d) {
|
||||||
|
if (d.children) {
|
||||||
|
d._children = d.children;
|
||||||
|
d.children = null;
|
||||||
|
} else {
|
||||||
|
d.children = d._children;
|
||||||
|
d._children = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
19
index.html
19
index.html
|
|
@ -5,7 +5,6 @@
|
||||||
<title>Estructura de Madrid-Destino 2016</title>
|
<title>Estructura de Madrid-Destino 2016</title>
|
||||||
<link type="text/css" rel="stylesheet" href="style.css"/>
|
<link type="text/css" rel="stylesheet" href="style.css"/>
|
||||||
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||||
<script src="d3js.js" charset="utf-8"></script>
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
.node circle {
|
.node circle {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -26,14 +25,12 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="body">
|
<h1>Estructura de Madrid Destino 2016</h1>
|
||||||
<h1>Estructura de Madrid Destino</h1>
|
<p>Para entender el contexto vea el <a href="https://infotics.es/articulo/mapas-mentales-con-orgmode/">artículo de Infotics</a>.</p>
|
||||||
<div id="footer">
|
<ul>
|
||||||
<p>Realizado con <a href="https://github.com/vchatterji/opml2json">opml2json</a></p>
|
<li><a href="d3js.html">Con D3.js</li>
|
||||||
<div class="hint"><p>pincha para expandir o colapsar</p></div>
|
<li><a href="pinturajs.html">Con pintora.js</a></li>
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
</body>
|
||||||
<script type="text/javascript">
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
174
index.html~
Normal file
174
index.html~
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Estructura de Madrid-Destino 2016</title>
|
||||||
|
<link type="text/css" rel="stylesheet" href="style.css"/>
|
||||||
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
.node circle {
|
||||||
|
cursor: pointer;
|
||||||
|
fill: #fff;
|
||||||
|
stroke: steelblue;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node text {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
path.link {
|
||||||
|
fill: none;
|
||||||
|
stroke: #ccc;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="body">
|
||||||
|
<h1>Estructura de Madrid Destino</h1>
|
||||||
|
<div id="footer">
|
||||||
|
<p>Realizado con <a href="https://github.com/vchatterji/opml2json">opml2json</a></p>
|
||||||
|
<div class="hint"><p>pincha para expandir o colapsar</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var m = [20, 120, 20, 120],
|
||||||
|
w = 1280 - m[1] - m[3],
|
||||||
|
h = 800 - m[0] - m[2],
|
||||||
|
i = 0,
|
||||||
|
root;
|
||||||
|
|
||||||
|
var tree = d3.layout.tree()
|
||||||
|
.size([h, w]);
|
||||||
|
|
||||||
|
var diagonal = d3.svg.diagonal()
|
||||||
|
.projection(function(d) { return [d.y, d.x]; });
|
||||||
|
|
||||||
|
var vis = d3.select("#body").append("svg:svg")
|
||||||
|
.attr("width", w + m[1] + m[3])
|
||||||
|
.attr("height", h + m[0] + m[2])
|
||||||
|
.append("svg:g")
|
||||||
|
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||||
|
|
||||||
|
d3.json("madrid-destino.json", function(json) {
|
||||||
|
root = json;
|
||||||
|
root.x0 = h / 2;
|
||||||
|
root.y0 = 0;
|
||||||
|
|
||||||
|
function toggleAll(d) {
|
||||||
|
if (d.children) {
|
||||||
|
d.children.forEach(toggleAll);
|
||||||
|
toggle(d);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the display to show a few nodes.
|
||||||
|
root.children.forEach(toggleAll);
|
||||||
|
|
||||||
|
update(root);
|
||||||
|
});
|
||||||
|
|
||||||
|
function update(source) {
|
||||||
|
var duration = d3.event && d3.event.altKey ? 5000 : 500;
|
||||||
|
|
||||||
|
// Compute the new tree layout.
|
||||||
|
var nodes = tree.nodes(root).reverse();
|
||||||
|
|
||||||
|
// Normalize for fixed-depth.
|
||||||
|
nodes.forEach(function(d) { d.y = d.depth * 180; });
|
||||||
|
|
||||||
|
// Update the nodes…
|
||||||
|
var node = vis.selectAll("g.node")
|
||||||
|
.data(nodes, function(d) { return d.id || (d.id = ++i); });
|
||||||
|
|
||||||
|
// Enter any new nodes at the parent's previous position.
|
||||||
|
var nodeEnter = node.enter().append("svg:g")
|
||||||
|
.attr("class", "node")
|
||||||
|
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
|
||||||
|
.on("click", function(d) { toggle(d); update(d); });
|
||||||
|
|
||||||
|
nodeEnter.append("svg:circle")
|
||||||
|
.attr("r", 1e-6)
|
||||||
|
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
|
||||||
|
|
||||||
|
nodeEnter.append("svg:text")
|
||||||
|
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
|
||||||
|
.attr("dy", ".35em")
|
||||||
|
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
|
||||||
|
.text(function(d) { return d.name; })
|
||||||
|
.style("fill-opacity", 1e-6);
|
||||||
|
|
||||||
|
// Transition nodes to their new position.
|
||||||
|
var nodeUpdate = node.transition()
|
||||||
|
.duration(duration)
|
||||||
|
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
|
||||||
|
|
||||||
|
nodeUpdate.select("circle")
|
||||||
|
.attr("r", 4.5)
|
||||||
|
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
|
||||||
|
|
||||||
|
nodeUpdate.select("text")
|
||||||
|
.style("fill-opacity", 1);
|
||||||
|
|
||||||
|
// Transition exiting nodes to the parent's new position.
|
||||||
|
var nodeExit = node.exit().transition()
|
||||||
|
.duration(duration)
|
||||||
|
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
|
||||||
|
.remove();
|
||||||
|
|
||||||
|
nodeExit.select("circle")
|
||||||
|
.attr("r", 1e-6);
|
||||||
|
|
||||||
|
nodeExit.select("text")
|
||||||
|
.style("fill-opacity", 1e-6);
|
||||||
|
|
||||||
|
// 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.
|
||||||
|
function toggle(d) {
|
||||||
|
if (d.children) {
|
||||||
|
d._children = d.children;
|
||||||
|
d.children = null;
|
||||||
|
} else {
|
||||||
|
d.children = d._children;
|
||||||
|
d._children = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
pintorajs-lr.png
Normal file
BIN
pintorajs-lr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
89
style.css~
Normal file
89
style.css~
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
body {
|
||||||
|
background: url(../images/texture-noise.png);
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: "Helvetica Neue", Helvetica;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chart, #header, #footer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header, #footer {
|
||||||
|
z-index: 1;
|
||||||
|
display: block;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 300;
|
||||||
|
text-shadow: 0 1px 0 #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header.inverted, #footer.inverted {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 1px 4px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
top: 80px;
|
||||||
|
left: 140px;
|
||||||
|
width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
top: 680px;
|
||||||
|
right: 140px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
rect {
|
||||||
|
fill: none;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
line {
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.string, .regexp {
|
||||||
|
color: #f39;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keyword {
|
||||||
|
color: #00c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment {
|
||||||
|
color: #777;
|
||||||
|
font-style: oblique;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
color: #369;
|
||||||
|
}
|
||||||
|
|
||||||
|
.class, .special {
|
||||||
|
color: #1181B8;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link, a:visited {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: 1280px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue