如何使用D3和Bootstrap显示所有数据元素？

刚开始使用D3，我的下面的HTML应该显示每个数组（竖条）的垂直条，但它只显示3条。如何使用D3和Bootstrap显示所有数据元素？

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"/> 
    <style type="text/css"> 
     div.bar { 
      display: inline-block; 
      width: 20px; 
      height: 75px; 
      background-color: teal; 
     } 
    </style> 
</head> 
<body> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbar" 
        aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">D3</a> 
     </div> 
    </div> 
</nav> 
<script type="text/javascript" src="js/d3.js"></script> 
<script type="text/javascript"> 
    var dataset = [5, 10, 15, 20, 25]; 

    d3.select("body") 
      .selectAll("div") 
      .data(dataset) 
      .enter() 
      .append("div") 
      .attr("class", "bar"); 
</script> 
</body> 
</html>

但是，如果我nav前移动<script>...</script>，我能看到的棒（5）正确的号码。出于性能方面的原因，我想保持原来的顺序，然后解决。有任何想法吗？

来源

2015-05-11 Bala

在你当前的实现，当你调用selectAll("div")，所产生的选择包含两个元素<div>已经存在于DOM（类container和类navbar-header）。前两个数据值（5和10）与这两个元素相关联。其余三个数据值（15,20和25）是enter()选择中的唯一值。

一个简单的解决方法是使用selectAll("div.bar")代替，尽管您可能想重新阅读D3.js文档以更好地理解原始代码的错误原因。

来源

2015-05-11 12:41:40

啊哈。你钉了它。很棒。 – Bala

如何使用D3和Bootstrap显示所有数据元素？

回答

相关问题