d3過渡從頁面加載而不是模式彈出窗口加載開始

Question

我的頁面中有一個簡單的引導程序模式集，可以單擊打開：

<h4><a data-toggle="modal" data-target="#myModal">Modal Page</a></h4>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- etc -->

在那個模態中，我有一些帶有動畫的d3條。 這在JS文件中：

    var width = 100, height = 20;

    d3.select("#thing").append('svg')
        .attr('width', "100%")
        .attr('height', 15)
        .append('rect')
        .attr("width", 0)
        .transition().duration(750).ease("linear")
        .attr('width', "100%")

我的問題是此轉換從頁面加載開始，而不是在打開彈出窗口時開始。 當我將持續時間設置為較高的值（例如7500）時，我將有足夠的時間來選擇模態並觀看它，所以我知道動畫的效果。 我如何才能延遲此過渡直到模態窗口打開才開始？

Answer 1

嘗試觸發模態秀的過渡

$("#myModal").on('shown', function(){
   var width = 100, height = 20;

        d3.select("#thing").append('svg')
            .attr('width', "100%")
            .attr('height', 15)
            .append('rect')
            .attr("width", 0)
            .transition().duration(750).ease("linear")
            .attr('width', "100%");
});