D3.js charts placed in a bootstrap carousel

Question

I am trying to make a slideshow of D3 charts using the bootstrap carousel. I have my charts created in separate javascript files and I put the location of the files in the source for the carousel items, but I am getting no output. There is also no error messages shown on the console.

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

I thought if I gave the respective carousel items an id for which D3 to draw the charts, that should work. How can I go about making the charts show?

Answer 1

When you create your charts you can define where to place it on you DOM, being an svg item for the most part ( the same concept applies for other ways such as adding div 's for a bar chart or using a canvas ). So add your JavaScript inside <script> after your DOM items:

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

Inside say nelsonAlanModel.js append an svg to the element with the id chartArea1 by doing:

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

And so on for the rest of the items.

Here is an example using some basic charts of a circle and a box inside a boostrap carousel.