d3.select方法不起作用

Question

d3.select方法不起作用

我是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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

nau*_*tat 26

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

body目前还没有元素存在,您的脚本正在执行.这意味着d3.select("body")它将是空的,并且没有div.chart被追加.

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

归档时间：	13 年前
查看次数：	9185 次
最近记录：	11 年，1 月前