d3.select方法不工作

我是新來datavis和D3庫，我試圖按照這裏的嘖嘖http://mbostock.github.com/d3/tutorial/bar-1.html d3.select方法不工作

當我運行的代碼，沒有顯示在我的網頁，任何人都可以指出問題？？

我認爲它與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>

來源

2012-10-30 Daft

該問題與您的<script> .. </script>在html文檔中的位置有關。

否body元素在您的腳本執行時尚未存在。這意味着d3.select("body")將爲空，且不會附加div.chart。

嘗試在<body> .. </body>部分內移動您的<script> .. </script>。這將保證您的代碼在執行時存在body元素。

來源

2012-10-30 17:21:57 nautat

您可能還想提一下'script'標籤應該位於body標籤的** end **處，以便在執行腳本之前允許DOM完全加載。 – paradite

使用內部的身體使其不僅可用於標籤或任何的，但也可以更快地執行它。也作爲div是一個標籤，你可以創建一個類，例如。然後將其用作d3.select（「。one」），以使其不重合。

來源

2012-10-31 06:32:09

如果您不希望將<script>標記放入<body>元素中，則也可以在DOM準備就緒後告訴瀏覽器執行您的d3代碼（或任何其他JavaScript代碼）。

使用庫如jQuery，你可以使用：

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

這將確保之後的整個DOM是準備就緒，包括<body>元素腳本執行。

僅供參考，示例和jQuery ready函數的較短版本，請參閱http://learn.jquery.com/using-jquery-core/document-ready/。

來源

2014-10-05 17:03:34 jbmusso

d3.select方法不工作

回答

相關問題