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

【问题标题】：Plot dimple(d3.js) chart in deck.js section在 deck.js 部分绘制凹坑（d3.js）图表
【发布时间】：2013-07-07 02:56:42
【问题描述】：

我想在deck.js 演示文稿中插入一个dimple 绘图。在线下面的代码将情节放在后台的正文中。但我想让情节显示在部分类中。我想我必须在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。中的索引页位于介绍文件夹中。

【问题讨论】：

标签： svg d3.js deck.js dimple.js

【解决方案1】：

我从未使用过deck.js，但你尝试过吗：

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

或

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

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案3】：

我喜欢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>

希望如此

约翰

【讨论】：

【解决方案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>

【讨论】：