無法使用d3.js更改字體大小

作爲d3.js的新手，我正在嘗試編寫一個簡單的代碼來爲數組中的段落計算字體大小。這是我的代碼：無法使用d3.js更改字體大小

<html> 
<head> 
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script> 
    d3.select('body') 
     .selectAll('p') 
     .data([5,10]) 
     .style("font-size", function(d) { return d + "px"; }); 
</script> 
</head> 
<body> 
<p>para 1</p> 
<p>para 2</p> 
</body> 
</html>

這似乎是一個非常簡單的事情，但由於某種原因無法正常工作。任何關於我哪裏出錯的幫助都會有幫助。

來源

2014-07-21 arjun010

它wors罰款，添加到您的代碼'$（文件）。就緒（函數（）{/ *這裏的代碼* /}）;' –

感謝@MindaugasVečkys。。我明白我要去哪裏錯了:) – arjun010

發生這種情況是因爲腳本執行時，直到那時<P>元素還沒有被創建。所以只需在頁面末尾包含腳本，它應該可以正常工作。

JSFiddle Link

的代碼會是這樣的。

<html> 
<head> 
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
</head> 
<body> 
<p>para 1</p> 
<p>para 2</p> 
</body> 

<script> 
    d3.select('body') 
     .selectAll('p') 
     .data([5,10]) 
     .style("font-size", function(d) { return d + "px"; }); 
</script> 
</html>

方法2

以便它能夠創建DOM後才能執行，您也可以在onLoad事件編寫腳本。

在純JavaScript它可以像這樣

<script> 
window.onload=function(){ 

d3.select('body') 
     .selectAll('p') 
     .data([5,10]) 
     .style("font-size", function(d) { return d + "px"; }); 

} 
</script>

做或者你可以使用jQuery（如果你願意）。其示例代碼將是這樣的

<script> 
     $(document).on('laod',funciton(){ 
     d3.select('body') 
       .selectAll('p') 
       .data([5,10]) 
       .style("font-size", function(d) { return d + "px"; }); 
    });</script>

來源

2014-07-21 10:24:31 Shiva

謝謝溼婆。 .sorry我錯過了這樣一個基本點:) – arjun010

-1

我更喜歡生成直接來自數據的HTML/SVG元素，如this tutorial中所述。

<html> 
    <head> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script> 
     d3.select('body') 
      .data([5,10]) 
      .enter().append("p") 
      .style("font-size", function(d) { return d + "px"; }) 
      .text("para"); 
    </script> 
    </head> 
    <body> 
    </body> 
</html>

來源

2014-07-21 10:35:23 mb21

downvote的任何理由..？ – mb21

無法使用d3.js更改字體大小

回答

相關問題