javascript - 放置在 Bootstrap 轮播中的 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>

我想如果我给相应的旋转木马元素一个 id，D3 将为其绘制图表，那应该可行。我怎样才能让图表显示出来？

Answer 1

创建图表时，您可以定义将其放置在 DOM 上的位置，即 svg大多数元素(相同的概念适用于其他方式，例如为条形图添加 div 或使用 Canvas )。所以在 <script> 中添加你的 JavaScript在你的 DOM 元素之后:

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

里面说nelsonAlanModel.js附加一个 svg到 ID 为 chartArea1 的元素通过做:

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

其余元素依此类推。

Here is an example在 boostrap 旋转木马中使用一些基本的圆形和盒子图表。