1. 首页
  2. 问答
  3. D3.js代码滑动

D3.js代码滑动

2014-01-14 76 views
13

我努力让自己在Reveal.js幻灯片D3.js工作，但我不能让它运行，即使最基本的片段：D3.js代码滑动

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

不显示“测试”字样。我究竟做错了什么？

来源

2014-01-14 Enucatl

回答

21

好的，我们走吧。

我与Reveal.js & D3.js一个基本的例子，而且运作良好。

  • 有两个幻灯片
  • 第一张幻灯片包含条形图
  • 第二滑通过从JSON输入文件以数据呈现气泡图

你的代码工作正常如果放在以外的分区在底部。我已经将所有D3.js代码放在html页面的末尾，然后再靠近身体。

的文件夹结构显示下方（快照）

enter image description here

我放在HTML里面我的JS（为了更容易地读/领悟）

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

输出/结果

幻灯片1 enter image description here

幻灯片2 enter image description here

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

要了解更多有关条形图或气泡图码是如何工作：检查以下内容：

来源

2014-10-11 20:52:54 AAhad

3

我自己发现了。当然，我无法匹配尚未加载的id：如果我将d3 javascript代码放在index.html文件末尾的Reveal.initialize脚本块后面，它就可以工作。

来源

2014-01-14 14:35:01 Enucatl

15

两个现有的回答都很好，但我想指出的是，为我工作，并具有一定的优势，第3方法。

显示。js有一个事件系统，它也适用于per-slide data states。

这意味着您可以为每张幻灯片设置一个单独的JavaScript块，并且只有在该幻灯片加载时才能执行它。这使您可以在载入幻灯片时执行基于D3的动画，并且还具有将幻灯片的代码更接近文本/标记的优点。

例如，您可以像这样设置幻灯片。注意data-state属性：

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

，然后有一个相关的脚本块：

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

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

}); 
</script>

这里有一个演示的例子，使用这种技术： http://explunit.github.io/d3_cposc_2014.html

来源

2014-11-02 22:25:10 explunit

+0

您也可以看看这里的https： //github.com/hakimel/reveal.js/issues/456 这个问题给出了同样的答案。 – zipp

+0

最终，如果您有很多大型svg图形动画，这仍然可能会使客户端过载。有没有办法在离开当前幻灯片时来回切换幻灯片来清除svg？ – Pierre

相关问题

 相关问题