Question

我目前有以下html。

<!DOCTYPE html>
<html>
  <head>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      var circle = d3.selectAll("circle");
      circle.style("fill", "steelblue");
      circle.attr("r", 30);
    </script>
  </head>
  <body>
    <svg width="720" height="120">
      <circle cx="40" cy="60" r="10"></circle>
      <circle cx="80" cy="60" r="10"></circle>
      <circle cx="120" cy="60" r="10"></circle>
    </svg>
  </body>
</html>

我打开html的一些奇怪的原因。我没有得到我期望的简单结果。任何人都知道为什么？

Answer 1

问题是脚本在加载dom之前正在运行。有几个修复，最简单的方法是将脚本移动到正文的末尾。

<html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>
    <body>
        <svg width="720" height="120">
            <circle cx="40" cy="60" r="10"></circle>
            <circle cx="80" cy="60" r="10"></circle>
            <circle cx="120" cy="60" r="10"></circle>
        </svg>

        <script>
            var circle = d3.selectAll("circle");
            circle.style("fill", "steelblue");
            circle.attr("r", 30);
        </script>
    </body>
</html>

http://jsfiddle.net/46r21pn1/

d3.js未在HTML中引用属性

1 个答案: