Диаграмма dimple(d3.js) в разделе deck.js

Question

Я хотел бы вставить лунку в презентацию 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>

Если бы только включены конкретные разделы кода класса в моем вопросе. При необходимости полный код можно найти здесь. Страница указателя находится в папке введения.

Answer 1

Пара вещей нуждаются в исправлении:

Во-первых, вы не можете поместить тег сценария внутрь другого тега сценария. Вы должны переместить код, который загружает 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, на id созданного нами div:

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

Наконец, chart.js делает странное изменение размера графика, так как он слишком большой, чтобы поместиться на слайде. Не копаясь в источнике chart.js, мы можем решить проблему, создав меньший график:

var svg = dimple.newSvg("#graphHere", 400, 200);

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

Я надеюсь, что надежды

Джон

Answer 3

Я никогда не использовал deck.js, но вы пробовали:

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

или же

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

Дай мне знать, если это работает. Если нет, я посмотрю на ваш код.

Answer 4

Я знаю, что эта ветка была давным-давно, но позвольте мне добавить одну вещь в дополнение к ответу Адама. По крайней мере, в dimple v2.1.2 + deck.js v1.1.0 + Firefox 34.0 график поврежден в примере Адама. Кажется, что размер тега div должен быть явно установлен:

<div id="graphHere" style="width:400px;height:300px;"></div> 
...
<script>
 var svg = dimple.newSvg("#graphHere", 400, 300);
 // plotting function goes here 
</script>