Javascript 无法使用d3.js更改字体大小_Javascript_D3.js

Javascript 无法使用d3.js更改字体大小

javascript d3.js

Javascript 无法使用d3.js更改字体大小,javascript,d3.js,Javascript,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("fon

作为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>


d3.选择（'主体'）
.selectAll（'p'）
.数据（[5,10]）
.style（“字体大小”，函数（d）{返回d+“px”；}）；
第1款
第2段

这似乎是一件很简单的事情，但由于某种原因，它不起作用。任何关于我哪里出错的帮助都会很有帮助。

这是因为当脚本被执行时，直到那时，

元素还没有被创建。所以只需在页面末尾包含脚本，它就可以正常工作了

代码是这样的
<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>

或者，您也可以使用jQuery（如果您愿意的话）
<script>
window.onload=function(){

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

}
</script>

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


$（文档）.on（'laod'，function（）{
d3.选择（'主体'）
.selectAll（'p'）
.数据（[5,10]）
.style（“字体大小”，函数（d）{返回d+“px”；}）；
});
我更喜欢直接从数据生成HTML/SVG元素，如中所述

d3.选择（'主体'）
.数据（[5,10]）
.enter（）.append（“p”）
.style（“字体大小”，函数（d）{返回d+“px”；}）
.案文（“第段”）；
很好，添加到您的代码$（文档）.ready（函数（）{/*code here*/}）谢谢@MindaugasVečkys。我明白我错在哪里：）
<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>