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

Unable to change font size using d3.js

本文关键字：字体 js d3      更新时间：2023-09-26

是新的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>

这似乎是一件非常简单的事情，但由于某种原因，它不起作用。

这是因为当脚本被执行时，<P>元素还没有被创建。所以只要在页面的末尾包含脚本，它应该工作得很好。

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>

方法2

您还可以在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>

我更喜欢像本教程中解释的那样直接从数据生成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>
相关文章：