在deck.js部分绘制凹陷(D3.js)图表

Question

我想在deck.js演示文稿中插入dimple图。下面的在线代码将正文中的情节放在后台。但我希望在section类中显示绘图。我想我必须在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中找到完整的代码。中的索引页位于introduction文件夹中。

Answer 1

有几件事需要解决：

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

...
    <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的外观，所以我就把它拉下来玩了一把。然后我回来了，发现Adam基本上已经解释了我刚刚发现的一切。您需要在幻灯片中放置一个div，并将svg添加到该div中，否则幻灯片缩放代码会复制图表。

首先在相关幻灯片中添加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);

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