javascript - Código D3.js en la diapositiva Reveal.js
(3)
Intento hacer que D3.js funcione en las diapositivas Reveal.js, pero no puedo hacer que ejecute incluso el fragmento más básico:
<section>
<h2>Title</h2>
<div id="placeholder"></div>
<script type="text/javascript">
d3.select("#placeholder").append("p").text("TEST");
</script>
</section>
No muestra la palabra "PRUEBA". ¿Qué estoy haciendo mal?
Ambas respuestas existentes están bien, pero me gustaría señalar un tercer enfoque que funcionó para mí y tiene algunas ventajas.
Reveal.js tiene un sistema de eventos y también funciona con los estados de datos por diapositiva .
Esto significa que puede tener un bloque de javascript por separado para cada diapositiva y hacer que se ejecute solo cuando se carga esa diapositiva. Esto le permite realizar animaciones basadas en D3 al cargar la diapositiva y tiene la ventaja adicional de colocar el código para la diapositiva más cerca del texto / marcado de la misma.
Por ejemplo, podría establecer su diapositiva así. Tenga en cuenta el atributo de data-state :
<section data-state="myslide1">
<h2>Blah Blah</h2>
<div id="slide1d3container"></div>
</section>
Y luego tiene un bloque de script asociado:
<script type="text/javascript">
Reveal.addEventListener( ''myslide1'', function() {
var svg = d3.select("#slide1d3container").append("svg")
// do more d3 stuff
} );
</script>
Aquí hay un ejemplo de una presentación que usa esta técnica: http://explunit.github.io/d3_cposc_2014.html
De acuerdo, aquí vamos.
He hecho un ejemplo básico con Reveal.js y D3.js y funciona bien.
- Hay dos diapositivas
- La primera diapositiva contiene un gráfico de barras
- La segunda diapositiva representa el diagrama de burbujas tomando datos de un archivo de entrada json
Su código funciona bien si se coloca fuera de la sección en la parte inferior. He colocado todo el código D3.js al final de la página html antes de que el cuerpo esté más cerca.
La estructura de la carpeta se muestra a continuación (en instantánea)
Coloqué mi JS dentro del HTML (para facilitar la lectura / comprensión)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js with D3 JS</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<style>
.chart rect {
fill: #63b6db;
}
.chart text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
text {
font: 10px sans-serif;
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>Barebones Presentation</h2>
<p>This example contains the bare minimum includes and markup required to run a reveal.js presentation.</p>
<svg class="chart"></svg>
</section>
<section id="sect2">
<h2>No Theme</h2>
<p>There''s no theme included, so it will fall back on browser defaults.</p>
<svg class="bubleCharts"></svg>
</section>
</div>
</div>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize();
</script>
<script src="js/d3.min.js"></script>
<script type="text/javascript">
//------ code to show D3 Bar Chart on First Slide-------
var data = [44, 28, 15, 16, 23, 5];
var width = 420,
barHeight = 20;
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width]);
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
//---Code below will show Bubble Charts on the secon Slide -------
var diameter = 560,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select(".bubleCharts")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json("flare.json", function(error, root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.packageName); });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3); });
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</body>
</html>
Salida / resultados
Diapositiva 1
Diapositiva 2
Descargue el código completo https://github.com/aahad/D3.js/tree/master/Reveal JS con D3 JS
Para obtener más información sobre cómo funciona el código de barras o el código de burbujas: verifique lo siguiente:
- Ejemplos de Bubble Chart: http://bl.ocks.org/mbostock/4063269
- Ejemplos de Bar Chart: http://bost.ocks.org/mike/bar/
Me enteré por mi cuenta. Por supuesto, no puedo hacer coincidir los ID que aún no están cargados: funciona si coloco el código javascript d3 después del bloque de script Reveal.initialize al final del archivo index.html.