D3.js圖表​​放置在引導輪播中

Question

我正在嘗試使用自舉輪播對D3圖表進行幻燈片顯示。 我在單獨的javascript文件中創建了圖表，並且將文件的位置放在輪播項目的源中，但沒有任何輸出。 控制台上也沒有顯示錯誤消息。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
    <ol class="carousel-indicators">
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
       <li data-target="#myCarousel" data-slide-to="1"></li>
       <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active" id="chartArea1">
          <img src="scripts/nelsonAlanModel.js">
        </div>

        <div class="item" id="chartArea2">
          <img src="scripts/nelsonAlanModel_2.js">
        </div>

        <div class="item">
          <img src="scripts/coxPropHazModel.js" >
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
           <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
           <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
        </a>
    </div>
</div>

我以為如果給各個輪播項目指定一個ID，D3可以為該ID繪制圖表，那應該可以。 如何使圖表顯示？

Answer 1

創建圖表時，您可以定義將其放置在DOM上的位置，大部分情況下是svg項（ 同一概念適用於其他方式，例如為條形圖添加div或使用canvas ）。 因此，在DOM項之后的<script>內添加JavaScript：

<div class="carousel-inner" role="listbox">
    <div class="item active" id="chartArea1">
    </div>
    ...
</div>
...
<script src="scripts/nelsonAlanModel.js"></script>

在內部說nelsonAlanModel.js通過執行以下nelsonAlanModel.js將svg附加到具有id chartArea1的元素上：

d3.select("#chartArea1").append("svg")
    ...

其余項目依此類推。

這是一個示例，其中使用了一些在Boostrap轉盤中的圓圈和盒子的基本圖表。