D3過渡頁面加載，而不是在模式彈出負荷

Question

開始我有一個簡單的引導模式集我的網頁上點擊打開：裏面那個語氣，我與動畫一些酒吧D3

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

。這是在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%"); 
});