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>

テキストの間にグラフを表示するには、ディンプルに渡された選択を、作成した 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

このスレッドは昔からのものであることは知っていますが、Adam の回答に加えて 1 つ追加させてください。少なくともディンプル 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 に答える