svg - 在deck.js部分中绘制dimple(d3.js)图表

我想在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中找到完整的代码。中的索引页位于简介文件夹中。

最佳答案

有几件事需要修复：

首先，您不能将脚本标签放在另一个脚本标签内。您应该将加载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>

其次，正如您所怀疑并John指出的那样，使用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);

关于svg - 在deck.js部分中绘制dimple(d3.js)图表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17549293/