d3 transition begins on page load instead of on modal popup load
<p>I have a simple bootstrap modal set in my page to open on a click:</p>

<pre><code>&lt;h4&gt;&lt;a data-toggle="modal" data-target="#myModal"&gt;Modal Page&lt;/a&gt;&lt;/h4&gt;

&lt;div id="myModal" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
        &lt;!-- etc --&gt;
</code></pre>

<p>Inside that modal I had some d3 bars with animations. This is in the JS file:</p>

<pre><code>    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%")
</code></pre>

<p>My problem is that this transition begins on page load instead of when I open the popup. When I set the duration to something high (say 7500) I would have enough time to select the modal and watch it go, so I know the animation works. How can I delay this transition to not begin until the modal window is open?</p>