D3.js d3基本追加示例不工作_D3.js_Append

D3.js d3基本追加示例不工作

d3.js

D3.js d3基本追加示例不工作,d3.js,append,D3.js,Append,我只是从d3开始，而不是通常的jquery，但即使是它们的基本示例似乎也没有实际附加任何内容。“我的分区”标记中未添加任何内容： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <meta name="description" content="stats"> </head&

我只是从d3开始，而不是通常的jquery，但即使是它们的基本示例似乎也没有实际附加任何内容。“我的分区”标记中未添加任何内容：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Test</title>
  <meta name="description" content="stats">
</head>

<body>
    <script type="text/javascript"src="js/d3.min.js"></script>
  <script type='text/javascript'>
var section = d3.selectAll("section");

section.append("div")
    .html("First!");

section.append("div")
    .html("Second.");
  </script>
<section>asfd</section>
<section>erasdf</section>
<section>asdfq</section>
<section>asdfasdfas</section>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
</body>
</html>


试验
var section=d3。选择全部（“section”）；
第节附加（“div”）
.html（“第一个！”）；
第节附加（“div”）
.html（“第二”）；
asfd
伊拉德夫
asdfq
asdfasdfas
嗨
嗨
嗨

追加不起作用的原因是您先添加了脚本，然后才添加了

。由于脚本标记是第一个，脚本将首先执行，当执行

selectAll（“section”）

时，它会搜索要追加的节标记，但它不存在，因为节标记位于脚本之后。为了使脚本正常工作，将脚本移动到底部
HTML:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <meta name="description" content="stats"> </head> <body> <section>asfd</section> <section>erasdf</section> <section>asdfq</section> <section>asdfasdfas</section> <p>Hi</p> <p>Hi</p> <p>Hi</p> <script type="text/javascript"src="js/d3.min.js"></script> <script type='text/javascript'> var section = d3.selectAll("section"); section.append("div") .html("First!"); section.append("div") .html("Second."); </script> </body> </html>

试验 asfd 伊拉德夫 asdfq asdfasdfas 嗨嗨嗨 var section=d3。选择全部（“section”）；第节附加（“div”） .html（“第一个！”）；第节附加（“div”） .html（“第二”）；
尝试将您的d3代码移到底部，似乎您正在尝试在DOMquick fiddle中实际存在的部分之前选择它……谢谢Josh，但d3已经定义好了。我在控制台中查看过，键入d3时得到了方法提示。@FernOfTheAndes Hm。我有最新的d3源代码。我试着设置一个本地主机以防万一，但也没用。我没有收到任何控制台错误，所以它正在查找d3脚本并加载它。@user3618110 d3定义为是，问题（我认为）是还没有
节
元素，所以当您尝试选择它们时，它不会返回任何内容，因此不会附加div，等等。