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

Question

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

Answer 1

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

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

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

将 iframe 加载到页面上距顶部至少 600 像素或第一个视口的 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>

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

Can I implement a D3 svg animation in AMP page?

d3.js

data-visualization

amp-html