我可以在AMP页面中实现D3 svg动画吗？

Question

如何在格式良好的AMP页面中插入SVG元素，并使用d3.js库为其设置动画？如何使用d3数据可视化建立格式良好的AMP页面？

Answer 1

您需要将交互式图形放入单独的html文件中，然后将其嵌入为amp-iframe。

From the documentation：

将AMP脚本加载到head标记中：

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

将iframe加载到页面上至少600px或从顶部开始的第一个视口的75％。

<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>