Метод d3.select не работает

Я новичок в datavis и библиотеке D3, и я стараюсь следовать здесь. http://mbostock.github.com/d3/tutorial/bar-1.html

Когда я запускаю код, на моей веб-странице ничего не отображается, может ли кто-нибудь указать на проблему?

Я думаю, что это связано с методом d3.select. Когда я запускаю код и проверяю его, тело пустое, поэтому я предполагаю, что ничего не создается. Любая помощь была бы чрезвычайно оценена!

<title>3Dtut - 1</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5">   </script>

<script type="text/javascript">
var data = [4, 8, 15, 16, 23, 42];  

//container for the bar chart
var chart = d3.select("body").append("div")
.attr("class", "chart");

//adding div elements to the bar chart
 chart.selectAll("div")
     .data(data)
     .enter().append("div")
     .style("width", function(d) { return d * 10 + "px"; })
     .text(function(d) { return d; });
</script>


<STYLE type="text/css">
.chart div {
   font: 10px sans-serif;
   background-color: steelblue;
   text-align: right;
   padding: 3px;
   margin: 1px;
   color: white;
 }
 </STYLE>
</head>
<body>
</body>
</html>

Ответ 1

Проблема связана с положением вашего <script> .. </script> в html-документе.

Нет элемента body, который существует в настоящий момент, когда выполняется ваш script. Это означает, что d3.select("body") будет пустым и не будет добавлено div.chart.

Попробуйте переместить <script> .. </script> внутри части <body> .. </body>. Это гарантирует, что элемент body существует, когда ваш код выполняется.

Ответ 2

Использование внутренней части тела делает ее не только доступной для тега, но и выполняет его быстрее. Кроме того, как div является тегом u, можно создать класс, например. один, а затем использовать его как d3.select( ". one" ), чтобы он не совпал.

Ответ 3

Если вы не хотите помещать теги <script> в элемент <body>, вы также можете сообщить браузеру выполнить ваш код d3 (или любой другой код JavaScript) после готовности DOM.

Используя библиотеку, такую как jQuery, вы можете использовать:

$( document ).ready(function() {
  // Your d3 code here
});

Это гарантирует, что ваши скрипты будут выполнены после завершения всей DOM, включая элемент <body>.

Для справки, примеры и более короткая версия функции jQuery ready, см. http://learn.jquery.com/using-jquery-core/document-ready/.