Question

我想在dimple演示文稿中插入deck.js图表。在线下面的代码将图表放在背景中的正文中。但是我希望在节课中显示情节。我想我必须改变var svg = dimple.newSvg("body", 800, 600)中的内容。由于我的javascript技能非常有限，我不知道要改变什么。任何帮助将非常感谢。

<section class="slide" id="test-section">
 <h2>test section</h2>      
  <script type="text/javascript">
       <script src="http://d3js.org/d3.v3.min.js"></script>
       <script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>
    var svg = dimple.newSvg("body", 800, 600);
    var data = [
      { "Word":"Hello", "Awesomeness":2000 },
      { "Word":"World", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
  </script>
</section>

如果只在我的问题中包含特定的部分类代码。如果需要，可以找到完整的代码here。它中的索引页面位于简介文件夹中。

Answer 1

有些事情需要解决：

首先，您不能将脚本标记放在另一个脚本标记内。您应该将加载d3和dimple的代码移动到文档的头部：

...
    <script src="../modernizr.custom.js"></script>  
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>   
</head>

其次，正如你所怀疑和约翰所指出的，dimple.newSvg的某些内容是错误的。您可能需要var svg = dimple.newSvg("#test-section", 800, 600);，因此图表仅添加到测试选择幻灯片中，而不是所有幻灯片中。

我实际上会更进一步，稍微改变一下html，这样你就可以精确控制图形的显示位置：

 <h2>Graph Title</h2>
 <div id = "graphHere"></div>  
 <h3>Some more text about the graph below the graph</h3>

要使图形显示在文本之间，只需将传递给dimple的选择更改为我们创建的div的id：

var svg = dimple.newSvg("#graphHere", 800, 600);

最后，chart.js正在做一些奇怪的图表调整大小，因为它太大而无法放在幻灯片上。如果不深入了解chart.js的来源，我们可以通过创建一个更小的图来解决问题：

var svg = dimple.newSvg("#graphHere", 400, 200);

Answer 2

我喜欢deck.js的样子，所以我把它拉下来玩了一下。然后我回来发现亚当基本上解释了我刚才发现的一切。你需要在幻灯片中放置一个div并将svg添加到其中，否则甲板缩放代码会复制图表。

首先在相关幻灯片中添加div：

<section class="slide">
    <div id="myChartDiv"></div>
</section>

然后在底部添加对集合的引用（如果你愿意，可以添加标题）：

<!-- Required JS files. -->
<script src="jquery-1.7.2.min.js"></script>
<script src="core/deck.core.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v1.min.js"></script>

然后是下面的凹坑代码：

<script type="text/javascript">

    var svg = dimple.newSvg("#myChartDiv", 800, 600);
    var data = [
      { "Word":"Hello", "Awesomeness":2000 },
      { "Word":"World", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
</script>

我希望希望

约翰

Answer 3

我从未使用过deck.js，但你试过了吗？

var svg = dimple.newSvg(".slide", 800, 600);

或

var svg = dimple.newSvg("#test-section", 800, 600);

如果有效，请告诉我。如果没有，我会看看你的代码。

Answer 4

我知道这个帖子来自很久以前，但除了亚当的回答之外，我还要补充一点。至少在dimple v2.1.2 + deck.js v1.1.0 + Firefox 34.0上，图表在Adam的例子中已经损坏了。似乎必须明确设置div标签的大小：

<div id="graphHere" style="width:400px;height:300px;"></div> 
...
<script>
 var svg = dimple.newSvg("#graphHere", 400, 300);
 // plotting function goes here 
</script>

在deck.js部分绘制凹坑（d3.js）图表

4 个答案: