Question

有没有办法在幻灯片显示中加载/启动特定的JavaScript？我想使用用d3.js编写的svg模板来绘制和动画化幻灯片内容。 Reveal.js-d3允许我将包含d3代码的html页面嵌入显示，但是我不知道如何传递参数，例如json格式的内容。

在显示方面，我创建了这样的幻灯片

<section>
    <h3>Scatter</h3>
    <div class="row no-margin-top">
        <div class="col-50 no-margin-top">
            <p>Item #1</p>
            <p>Item #2</p>
        </div>
    </div>
</section>

感谢reveal.js-d3，我可以使用D3通过以下代码在幻灯片中显示svg内容，其中scatter.html获取数据并显示相应的散点图。

    <div class="col-50 fig-container no-margin-top" 
        data-file="scatter.html">
    </div>

我现在想使用D3通过模板渲染幻灯片内容，类似于powerpoint smart-art。理想情况下，我希望D3脚本将内容作为参数（son格式）接收或从DOM获取。

    <div class="col-50 fig-container no-margin-top" 
        data = "{title: 'title', items: {{name: 'item1', content: 'details'}, {name: 'item2', content: 'details'}}" 
        data-file="smart_template.html"
        >
    </div>

或

标题

项目1

一些细节

item2

一些细节

另一种解决方案是将幻灯片内容存储在json格式的文件中，并使用div id声明指定要显示的内容。

    <div id="slide1" class="col-50 fig-container no-margin-top" 
        data-file="smart_template.html">
    </div>

从D3端，我使用DOM层次结构来获取要显示的数据，例如以下代码，从而显示。

var div1 = parent.document.getElementsByTagName('iFrame')[0].parentElement;
var id = div1.getAttribute('id');
var data = div1.getAttribute('data');

我对这些代码都不满意。我希望能够使用一些参数在幻灯片显示上启动代码，而不是加载html文档包含脚本和数据，例如：

<div class="col-50 fig-container no-margin-top" onload="my template('data')">

有什么建议吗？

如何结合使用JavaScript和揭示功能？

标题

0 个答案: