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绘制图表，应该工作。我怎样才能让图表显示？

Answer 1

当您创建的图表，你可以定义在哪里把它放在你的DOM，是大部分的svg项目（的概念同样适用于其他方式，如添加div的为条形图或使用帆布）。所以里面<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使用一些圆形和方框内的一个基本的图表推动传送带旋转木马。