ブートストラップモーダルでd3.jsが正しく表示されない

Question

bootstrapmodalに問題があります。d3.jsドーナツチャートを入れましたが、このように間違って表示されます。

数字はテキストと重複しますが、modalなしでは完全に機能します。

<div class="portfolio-modal modal" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true"> 
     <div class="modal-content"> 
      ... 
      <div class="container"> 
       ... 
       <div class="row"> 
        ... 
        <div class="col-md-6"> 
         <div id="pieChart"></div> 
        </div>     
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

多分あなたはモーダル幅の問題に直面しています。

Bootstrap 3.1.1には、モーダルlgおよびモーダルsmクラスが追加されました。 @mediaクエリを使用してモーダルサイズを制御します。これはモーダルサイズをよりグローバルに制御する方法です。あなた

<!-- Large modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

<!-- Small modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> 

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria- labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

ため

@media (min-width: 992px) 
.modal-lg 
{ 
    width: 900px; 
    height: 900px; /* control height here if its needed */ 
} 

1つのサンプル私は、それは後に、私の質問の一部を解決するためだ