Javascript d3.选择不起作用的方法_Javascript_D3.js

Javascript d3.选择不起作用的方法

javascript d3.js

Javascript d3.选择不起作用的方法,javascript,d3.js,Javascript,D3.js,我是datavis和D3库的新手，我在这里尝试跟随图坦卡蒙当我运行代码时，我的网页上没有显示任何内容，有人能指出问题吗我认为这与d3.select方法有关。当我运行代码并检查它时，主体是空的，所以我假设没有创建任何内容。任何帮助都将不胜感激 <title>3Dtut - 1</title> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"> &l

我是datavis和D3库的新手，我在这里尝试跟随图坦卡蒙

当我运行代码时，我的网页上没有显示任何内容，有人能指出问题吗

我认为这与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>

3Dtut-1
var数据=[4,8,15,16,23,42]；
//条形图的容器
var图表=d3.选择（“主体”）.追加（“div”）
.attr（“类别”、“图表”）；
//向条形图添加div元素
图表。选择全部（“div”）
.数据（数据）
.enter（）.append（“div”）
.style（“宽度”，函数（d）{返回d*10+“px”；}）
.text（函数（d）{return d；}）；
.海图组{
字体：10px无衬线；
背景颜色：钢蓝色；
文本对齐：右对齐；
填充：3倍；
保证金：1px；
颜色：白色；
}

问题与

的位置有关
在执行脚本时，还不存在body
元素。这意味着d3.select（“body”）
将为空，并且不会追加div.chart

尝试移动您的在中零件。这将保证在执行代码时，主体
元素存在。
在主体内部使用，不仅可用于标记或任何主体，而且执行速度更快。同样，因为div是一个标记，所以u可以创建一个类，例如one，然后将其用作d3。选择（“.one”），这样它就不会重合
 如果您不希望将
标记放在
元素中，您还可以告诉浏览器在DOM就绪后执行d3代码（或任何其他JavaScript代码）
使用jQuery之类的库，您可以使用：
$( document ).ready(function() {
  // Your d3 code here
});

这将确保在整个DOM（包括
元素）就绪后执行脚本
有关jQuery ready函数的示例和较短版本的参考，请参阅。
您可能还想提到脚本
标记应该位于body标记的末尾，以便在执行脚本之前完全加载DOM。