D3 Elements are invisible despite existing in DOM

Question

I have a bootstrap tab panel and I want to display a different d3 chart for each tab.

When the document loads, the first D3 chart is present in the DOM but its elements are invisible. Here's an example: https://i.stack.imgur.com/ZQfQm.png

Here is the setup for my tab pane in bootstrap:

<div role="tabpanel">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#ghg-co2" aria-controls="ghg-co2" role="tab" data-toggle="tab">
                <h4>Change in CO<sub>2</sub></h4></a>
            </li>
            <li role="presentation"><a href="#ghg-ch4" aria-controls="ghg-ch4" role="tab" data-toggle="tab">
                <h4>Change in CH4 (Methane)</h4></a>
            </li>
            <li role="presentation"><a href="#ghg-nos" aria-controls="ghg-nos" role="tab" data-toggle="tab">
                <h4>Change in Nitrous Oxide</h4></a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <script src="js/ghg.js"></script>

            <div role="tabpanel" class="tab-pane active fade fade-in" id="ghg-co2">
                <div id="chart-ghg-co2" class="d3-chart"></div>
            </div>
            <div role="tabpanel" class="tab-pane fade fade-in" id="ghg-ch4">
                <div id="chart-ghg-ch4" class="d3-chart"></div>
            </div>
            <div role="tabpanel" class="tab-pane fade fade-in" id="ghg-nos">
                <div id="chart-ghg-nos" class="d3-chart"></div>
            </div>
        </div>
    </div>

I have had issues with bootstrap displaying content in the tab pane correctly. I am using this hack in my style.css to override some bootstrap properties:

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     /* undo display:none          */
    height: 0;          /* height:0 is also invisible */
    overflow-y: hidden; /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
    height: auto;       /* let the content decide it  */
} /* bootstrap hack end */

I got it from this thread

My D3 function is almost identical to this example: d3 scatterplot

but with different data.

At the bottom of my HTML, I have:

<script>
   // Check if DOM is ready for D3
    $( document ).ready(ghgco2()); // Names of my three D3 chart functions
    $( document ).ready(ghgch4());
    $( document ).ready(ghgnos());
</script>

I suspect the problem is that my d3 function, ghgco2() is attempting to render before the div in which it resides, .chart-ghg-co2 is ready. For some reason, the svg has the correct dimensions, and the elements are all present, but it's completely blank. This is resolved when I switch between tabs on the bootstrap pane.

Any and all help is appreciated.