3

我想在deck.js演示文稿中插入一个酒窝图。在线下面的代码将情节放在后台的正文中。但我想让情节显示在部分类中。我想我必须在. 由于我的 javascript 技能非常有限，我不知道究竟要改变什么。任何帮助将不胜感激。var svg = dimple.newSvg("body", 800, 600)

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

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

4

4 回答 4

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>

我希望希望

约翰

于 2013-07-09T14:35:46.087 回答
2

有几件事需要修复：

首先，您不能将脚本标签放在另一个脚本标签内。您应该将加载 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);
于 2013-07-09T14:22:04.317 回答
1

我知道这个帖子是很久以前的了，但是让我在亚当的回答之外添加一件事。至少在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>
于 2015-01-06T23:03:07.713 回答
1

我从来没有使用过deck.js，但你有没有试过：

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

或者

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

让我知道这是否有效。如果没有，我会看看你的代码。

于 2013-07-09T14:06:00.123 回答