14

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

3 回答 3

26

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

body在您的脚本正在执行的那一刻，尚不存在任何元素。这意味着d3.select("body")它将是空的，并且没有div.chart被附加。

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

于 2012-10-30T17:21:57.607 回答
0

使用主体内部使其不仅可用于标签或任何标签，而且可以更快地执行它。同样，由于 div 是标签，您可以创建一个类，例如。一个，然后将其用作 d3.select(".one") 以使其不重合。

于 2012-10-31T06:32:09.737 回答
0

如果您不希望将<script>标签放在<body>元素中，您还可以告诉浏览器在 DOM 准备好后执行您的 d3 代码（或任何其他 JavaScript 代码）。

使用 jQuery 等库，您可以使用：

$( document ).ready(function() {
  // Your d3 code here
});

这将确保您的脚本在整个 DOM 准备好之后执行，包括<body>元素。

有关 jQuery 就绪函数的参考、示例和较短版本，请参阅http://learn.jquery.com/using-jquery-core/document-ready/。

于 2014-10-05T17:03:34.560 回答