D3.js图表​​放在引导转盘中

Question

我正在尝试使用bootstrap轮播制作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>

我想如果我给各自的轮播项目一个用于绘制图表的D3的ID，那应该可行。我怎样才能制作图表？

Answer 1

创建图表时，您可以定义将其放在DOM上的位置，大部分都是svg项目（相同的概念适用于其他方式，例如添加div用于条形图或使用画布）。因此，在您的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通过以下操作向svg的元素添加chartArea1：

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

等等其他项目。

Here is an example使用圆圈的基本图表和增强旋转木马内的方框。