Question

我有一个引导标签面板，我想为每个标签显示不同的d3图表。

当文档加载时，第一个D3图表出现在DOM中，但其元素是不可见的。这是一个例子：http://i.imgur.com/7ATTyhI.png

以下是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>

我遇到了正确显示选项卡窗格中内容的引导程序的问题。我在我的style.css中使用这个hack来覆盖一些bootstrap属性：

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

我是从this thread

得到的

我的D3功能几乎与此示例完全相同：d3 scatterplot

但数据不同。

在我的HTML底部，我有：

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

我怀疑问题是我的d3函数，ghgco2（）试图在它所在的div之前渲染，.chart-ghg-co2准备就绪。出于某种原因，svg具有正确的尺寸，并且元素都存在，但它完全是空白的。当我在引导窗格上的选项卡之间切换时，这已得到解决。

感谢任何和所有帮助。

尽管存在于DOM中，D3元素仍然是不可见的

0 个答案: