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> 

Я подумал, что если я дал соответствующие пункты карусельного идентификатор, для которого D3 рисовать диаграммы, которые должны работать. Как я могу сделать диаграммы?

Answer 1

При создании диаграммы вы можете определить, где разместить его на вас DOM, будучи svg элемент по большей части (то же самое относится и другие способы, такие как добавление div «S для гистограммы или с помощью холст). Так добавить JavaScript в <script> после ваших элементов DOM:

<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 используя некоторые основные диаграммы круга и коробки внутри карусели с ускорителем.