我可以在AMP頁面中實施D3 svg動畫嗎？

Question

如何在使用d3.js庫進行動畫製作的腳本中將SVG元素插入格式良好的AMP頁面中？我如何用一個d3數據可視化來構建一個格式良好的AMP頁面？

Answer 1

您需要將交互式圖形放入單獨的html文件中，然後將其嵌入爲放大器iframe。

From the documentation：

裝入AMP腳本到頭部標記：

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