Как показать все элементы данных с помощью D3 и Bootstrap?

Только что начатый с D3, и мой HTML ниже должен показывать вертикальные бары в соответствии с массивом (5 баров), но вместо этого он отображает только 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>

Однако, если я перееду <script>...</script> перед тем nav, я мог видеть правильное количество баров (5). По соображениям производительности я хотел бы сохранить свой первоначальный заказ и все же решить его. Есть идеи?

источник

2015-05-11 Bala

В текущей реализации, при вызове selectAll("div"), в результате выбора содержит два <div> элементы, которые уже присутствуют в DOM (класс container и класса navbar-header). Первые два значения данных (5 и 10) связаны с этими двумя элементами <div>. Остальные три значения данных (15, 20 и 25) являются единственными значениями в выборе enter().

Простым решением было бы использовать selectAll("div.bar"), хотя вы можете перечитать документацию D3.js, чтобы лучше понять, почему именно ваш исходный код является неправильным.

источник

2015-05-11 12:41:40

Aha. Ты сделал это. Прекрасно работает. – Bala

Как показать все элементы данных с помощью D3 и Bootstrap?

ответ

Смежные вопросы