最简单的D3.js示例无法工作

Question

最简单的D3.js示例无法工作

9

我在我的index.html文件中有这个代码，但它没有显示我想用D3添加的段落。

<!DOCTYPE html>
<html>
  <head>
    <title> D3 page template </title>
    <script type="text/javascript" src = "d3/d3.v3.js"></script> 
  </head>

  <body>
    <script type="text/javascript">
        d3.select("body").append("p").text("new paragraph!");
    </script>
  </body>
</html>

我引用D3.js的路径应该是正确的，因为如果我在浏览器中进行检查元素，我可以点击D3链接并跳转到其源代码。

enter image description here

- user1899082

2

请在d3的src中使用http://d3js.org/d3.v3.min.js。 - Prasath K

你可能引用错误了。 - Prasath K

但是当我在调试器中单击它时，它确实跳转到其源代码。 - user1899082

不知道的话....!!! - Prasath K

请看“Uncaught SyntaxError: Unexpected token ILLEGAL”一行右侧。它指出了d3无法加载的错误所在。 - pckill

显示剩余2条评论

3个回答

7

我假设您在没有网络服务器的情况下进行测试。如果是这样，那么您的URL将显示为file://...而不是http://...

因此，Javascript请求将发送到file:///.../D3/d3/d3.v3.js，该文件不会设置正确的响应标头，例如字符集和MIME类型。

您可以始终从CDN获取它以避免这个问题：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

- Frison Alexander

谢谢，这对我有用。我在我的文件中有以下内容，但没有起作用， <!DOCTYPE html><meta charset="utf-8"><script src="https://d3js.org/d3.v4.min.js"> </script> 之后，我添加了CDN的字符集，它就起作用了。为什么需要它呢？ - AKS

1

我曾经遇到过类似的问题。我的问题是脚本文件在加载d3js库之前就已经被加载了。只需添加defer即可解决问题。

<script src="app.js" defer></script>

- SZT

我建议在这一行之前添加 '''<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>''' 或者引用 d3 库，以获得更好的清晰度。 - navarq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- explunit · Accepted Answer

您的HTML页面缺少字符集设置。请添加以下内容：

<meta charset="utf-8">

D3的未压缩源代码包括π符号，如果字符集未定义，则会使浏览器混淆。