14

私はdatavisとD3ライブラリが初めてで、ここのtutに従おうとしていますhttp://mbostock.github.com/d3/tutorial/bar-1.html

コードを実行しても Web ページに何も表示されません。だれか問題を指摘してもらえますか??

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

<script>要素内にタグを配置したくない場合は<body>、DOM の準備が整った後に d3 コード (またはその他の JavaScript コード) を実行するようにブラウザーに指示することもできます。

jQuery などのライブラリを使用すると、以下を使用できます。

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

<body>これにより、要素を含む DOM 全体の準備が整った後にスクリプトが実行されるようになります。

参照、例、および短いバージョンの jQuery 対応関数については、http://learn.jquery.com/using-jquery-core/document-ready/を参照してください。

于 2014-10-05T17:03:34.560 に答える
0

本体の内側を使用すると、タグまたはいずれかで使用できるようになるだけでなく、実行も高速になります。また、divはタグであるため、クラスを作成できます。一致しないように d3.select(".one") として使用します。

于 2012-10-31T06:32:09.737 に答える