javascript d3.select 方法不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13142591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3.select method not working
提问by Daft
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
我是 datavis 和 D3 库的新手，我正在尝试按照这里的 tut 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??
当我运行代码时，我的网页上没有显示任何内容，有人能指出问题吗？
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!!!
我认为这与 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>
回答by nautat
The problem is related to the position of your <script> .. </script>within the html document.
问题与您<script> .. </script>在 html 文档中的位置有关。
No bodyelement exists yet at the moment that your script is being executed. That means that d3.select("body")will be empty, and no div.chartis being appended.
body在您的脚本正在执行时，尚不存在任何元素。这意味着d3.select("body")它将是空的，并且没有div.chart被附加。
Try to move your <script> .. </script>inside the <body> .. </body>part. This will guarantee that the bodyelement exists when your code is being executed.
尝试移动您的<script> .. </script>内部<body> .. </body>零件。这将保证body在执行代码时该元素存在。
回答by Vaibhav Magon
Using the inside the body makes it not only available to the tag or any of the but also executes it faster. Also as div is a tag u could create a class eg. one and then use it as d3.select(".one") so that it doesn't coincide.
使用 body 内部不仅可以让标签或任何其他人使用它，而且可以更快地执行它。同样 div 是一个标签，你可以创建一个类，例如。一个然后将其用作 d3.select(".one") 以使其不重合。
回答by jbmusso
If you do not wish to put your <script>tags within the <body>element, you can also tell the browser to execute your d3 code (or any other JavaScript code) after the DOM is ready.
如果您不想将<script>标签放在<body>元素中，您还可以在 DOM 准备好后告诉浏览器执行您的 d3 代码（或任何其他 JavaScript 代码）。
Using a library such as jQuery, you can use:
使用 jQuery 等库，您可以使用：
$( document ).ready(function() {
// Your d3 code here
});
This will ensure that your scripts are executed after the whole DOM is ready, including the <body>element.
这将确保您的脚本在整个 DOM 准备就绪后执行，包括<body>元素。
For reference, examples and a shorter version of jQuery ready function, see http://learn.jquery.com/using-jquery-core/document-ready/.
有关参考、示例和较短版本的 jQuery 就绪函数，请参阅http://learn.jquery.com/using-jquery-core/document-ready/。
