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>元素。所以只需在页面末尾包含脚本，它应该可以正常工作。

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

您还可以在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元素，如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>

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

2 个答案: