Показване на d3.js погрешно в модалния вариант на bootstrap - javascript, html, css, twitter-bootstrap, d3.js

Имам проблем, който причинява в bootstrap modal, Сложих 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>

Отговори:

Може би сте изправени пред проблем с ширината на модал.

в Bootstrap 3.1.1 те добавиха класове modal-lg и modal-sm. Можете да контролирате размера на алгоритъма, като използвате @media заявки, както правят. Това е по-глобален начин за контролиране на размера на модела.

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

Един пример за вас

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

Надявам се това да помогне на моя приятел, Ако бихте могли да предоставите JSFIDDLE файл би било лесно работата ни =)