Question

我是datavis和D3库的新手，我试图在这里跟随tut 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>

Answer 1

问题与html文档中<script> .. </script>的位置有关。

在您的脚本执行时，尚未存在body元素。这意味着d3.select("body")将为空，并且不会附加div.chart。

尝试将<script> .. </script>移到<body> .. </body>部分内。这将保证在执行代码时存在body元素。

Answer 2

使用身体内部使其不仅可用于标签或任何标签，而且还可以更快地执行。同样，div是一个标签，你可以创建一个类，例如。一个然后用它作为d3.select（“。one”），以便它不重合。

Answer 3

如果您不希望将<script>标记放在<body>元素中，您还可以告诉浏览器在DOM准备好后执行您的d3代码（或任何其他JavaScript代码）。

使用jQuery等库，您可以使用：

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

这将确保您的脚本在整个DOM准备就绪后执行，包括<body>元素。

有关jQuery ready函数的参考，示例和较短版本，请参阅http://learn.jquery.com/using-jquery-core/document-ready/。

d3.select方法不起作用

3 个答案: