问题描述
我是 datavis 和 D3 库的新手,我正在尝试遵循这里的 tut http://mbostock.github.com/d3/tutorial/bar-1.html
I am new to datavis and the D3 library and I'm trying to follow the tut here http://mbostock.github.com/d3/tutorial/bar-1.html
当我运行代码时,我的网页上没有显示任何内容,有人能指出问题吗??
When I run the code, nothing displays on my webpage, can anyone point out the problem??
我认为这与 d3.select 方法有关.当我运行代码并检查它时,主体是空的,所以我假设没有创建任何东西.任何帮助将不胜感激!!!
I think its something to do with the d3.select method. When I run the code and inspect it, the body is empty, so Im assuming nothing is being created. Any help would be hugely appreciated!!!
<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>
推荐答案
问题与你的 在 html 文档中.
The problem is related to the position of your <script> .. </script>
within the html document.
在执行您的脚本时,尚不存在 body
元素.这意味着 d3.select("body")
将为空,并且没有附加 div.chart
.
No body
element exists yet at the moment that your script is being executed. That means that d3.select("body")
will be empty, and no div.chart
is being appended.
尝试移动您的 ;.. </script>
在 中.. </body>
部分.这将保证在执行代码时 body
元素存在.
Try to move your <script> .. </script>
inside the <body> .. </body>
part. This will guarantee that the body
element exists when your code is being executed.
这篇关于d3.select 方法不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!