0

我正在尝试使用 D3.js，但是我的代码仅在包含在 HTML 父文档中的标签中时才有效——如果我在外部 JS 文档（即 script.js）中包含我的 JavaScript 则无效：

在 index.html 中：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>D3js Test</title>
  <link href="styles/style.css" rel="stylesheet" />
  <script src="scripts/d3.v3.min.js"></script>
  <script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

我正在尝试做一些非常简单的事情

在 script.js 中

var spaceCircles = [30, 70, 110];

var svgContainer = d3.select("body").append("svg")
                                .attr("width", 200)
                                .attr("height", 200);

var circles = svgContainer.selectAll("circle")
                      .data(spaceCircles)
                      .enter()
                      .append("circle");

var circleAttributes = circles
                   .attr("cx", function (d) { return d; })
                   .attr("cy", function (d) { return d; })
                   .attr("r", 20);

有人知道我错过了什么吗？

谢谢， TG

编辑感谢@Carlos487，我确实设法让它工作 - 但它需要引用 jQuery 并将所有内容包含在 doc ready 命令中。感觉这个应该没必要。。。

4

3 回答 3

1

当您尝试在外部文件 script.js 中操作 HTML 时，可能<body>尚未加载 HTML，该文件<body>在<head>. <body>尝试在标签内移动对 script.js 的引用，就在结束之前</body>。从性能的角度来看，将 Javascript 放在 HTML 文件的末尾通常也是一种很好的做法。

于 2013-11-07T21:20:37.590 回答
1

body这是在加载其他所有内容后运行脚本的非 jquery 方式（或者更准确地说，运行依赖于现有 html 元素的脚本部分）

//script.js
document.addEventListener('DOMContentLoaded', myInit);
function myInit(){
  var spaceCircles = [30, 70, 110];
  var svgContainer = d3.select("body").append("svg")
  ...
};
于 2013-11-07T21:56:59.520 回答
1

您是否尝试将所有这些代码放入 $(document).ready() 中，您必须添加 jquery，但您将确保在执行任何操作之前正确加载所有内容

于 2013-11-08T03:10:42.877 回答