我想在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。它中的索引页面位于简介文件夹中。
答案 0 :(得分:2)
有些事情需要解决:
首先,您不能将脚本标记放在另一个脚本标记内。您应该将加载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);
答案 1 :(得分: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>
我希望希望
约翰
答案 2 :(得分:1)
我从未使用过deck.js,但你试过了吗?
var svg = dimple.newSvg(".slide", 800, 600);
或
var svg = dimple.newSvg("#test-section", 800, 600);
如果有效,请告诉我。如果没有,我会看看你的代码。
答案 3 :(得分: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>