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

Question

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

这似乎很简单，但是由于某些原因无法正常工作。 关于我要去哪里的任何帮助都将真正有帮助。

Answer 1

发生这种情况的原因是，在执行脚本之前，直到那时还没有创建<P>元素，因此只需在页面末尾包含Script，它就可以正常工作。

JSFiddle链接

该守则将是这样的。

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

方法二

您还可以在onLoad事件中编写脚本，以便仅在创建DOM之后才执行脚本。

在纯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>

Answer 2

我更喜欢直接按照本教程中的说明从数据生成HTML / SVG元素。

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

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-07-21 10:24:31

解决方案2
-1 2014-07-21 10:35:23

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-07-21 10:24:31

解决方案2 -1 2014-07-21 10:35:23

解决方案1
2 已采纳 2014-07-21 10:24:31

解决方案2
-1 2014-07-21 10:35:23