Reveal.js幻灯片中的D3.js代码

Question

Reveal.js幻灯片中的D3.js代码

我试图让D3.js在Reveal.js幻灯片上运行,但我无法让它运行甚至最基本的片段:

<section>
    <h2>Title</h2>
    <div id="placeholder"></div>
    <script type="text/javascript">
        d3.select("#placeholder").append("p").text("TEST");
    </script>
</section>

Run Code Online (Sandbox Code Playgroud)

不显示"TEST"字样.我究竟做错了什么？

Answer 1

AAh*_*had 26

好的,我们走了.

我用Reveal.js和D3.js做了一个基本的例子,效果很好.

有两张幻灯片
第一张幻灯片包含条形图
第二张幻灯片通过从json输入文件中获取数据来渲染气泡图

如果代码放在底部的部分之外,则代码可以正常工作.我已将所有D3.js代码放在html页面的末尾,然后再缩小.

文件夹结构如下所示(快照中)

在此输入图像描述

我将我的JS放在HTML中(以便更容易阅读/理解)

<!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>

Run Code Online (Sandbox Code Playgroud)

输出/结果

幻灯片1 在此输入图像描述

幻灯片2 在此输入图像描述

使用D3 JS 下载完整代码https://github.com/aahad/D3.js/tree/master/Reveal JS

要了解有关条形图或气泡图代码如何工作的更多信息,请查看以下内容:

气泡图示例:http://bl.ocks.org/mbostock/4063269
条形图示例:http://bost.ocks.org/mike/bar/

Answer 2

exp*_*nit 19

现有的答案都很好,但我想指出第三种方法对我有用并且有一些优点.

Reveal.js有一个事件系统,它也适用于每个幻灯片数据状态.

这意味着您可以为每张幻灯片分别设置一个javascript块,并仅在加载幻灯片时执行.这使您可以在加载幻灯片时执行基于D3的动画,并且还具有将幻灯片的代码放置在更靠近文本/标记的位置的优势.

例如,您可以像这样设置幻灯片.注意data-state属性:

<section data-state="myslide1">
    <h2>Blah Blah</h2>
    <div id="slide1d3container"></div>
</section>

Run Code Online (Sandbox Code Playgroud)

然后有一个关联的脚本块:

<script type="text/javascript">
Reveal.addEventListener( 'myslide1', function() {

    var svg = d3.select("#slide1d3container").append("svg")
    // do more d3 stuff

} );
</script>

Run Code Online (Sandbox Code Playgroud)

以下是使用此技术的演示文稿示例:http: //explunit.github.io/d3_cposc_2014.html

归档时间：	11 年，9 月前
查看次数：	7764 次
最近记录：	10 年，12 月前