d3.select方法不工作 [英] d3.select method not working
问题描述
我是datavis和D3库的新手，我想在这里 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方法有关。当我运行代码并检查它，身体是空的，所以Im假设没有创建。任何帮助将非常感谢!!!
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>
推荐答案
问题与< script> ..< / script> 。
否 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> ..< / script> 在< body> ..< / 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方法不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
