d3过渡从页面加载而不是模式弹出窗口加载开始

Question

I have a simple bootstrap modal set in my page to open on a click:

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

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

    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%")

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?

Answer 1

try triggering the transition on modal show

$("#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%");
});