D3.js

Question

我正在使用 D3.js 的以下教程：https://www.tutorialspoint.com/d3js/index.htm。

我的问题如下：

我知道 HTML 中的位置在 .我的意思是，我通常把它放在这里：

<body>
     <!-- HTML code -->

<script>
     <!-- JS code or external JS link -->
</script>
</body>

通过这种做法，我正在寻找 HTML 内容呈现后的运行 JS。

但是！当我使用 D3.js 遵循这种做法时，我发现 D3.js 呈现我添加的内容（使用 d3("html").append(something to append)，在脚本标签之后.

例如！

<!DOCTYPE html>
<head>
    <title>D3.js Test</title>
</head>
<body>
<div class="div_test">
    <h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>

<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<script>
    d3.select("html").append("p").text("I get this text after the script tags");
</script>
</body>
</html>

我得到的内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>D3.js Test</title>
</head>
<body>
<div class="div_test">
    <h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script>
    d3.select("html").append("p").text("I get this text after the script tags");
</script>`
</body><p>I get this text after the script tags</p></html>

问题！

标签的位置是否正确？
是否可以在不添加 a 来锚定预期的新标签的情况下保持流量？

谢谢！！！

Answer 1

您可以使用 selection.insert() 来插入一个元素，而不是 将其附加 到 DOM。该方法的第二个参数决定了新创建的元素在 DOM 树中的位置。如果你只想把它放在第一个 <script> 元素的前面，你可以这样做：

d3.select("body").insert("p", "script")   // <-- insert before first <script>

如果您需要将它放在 <div> 之后，无论下一个元素是什么样子，您都可以使用 adjacent sibling combinator 到 select 直接跟在 <div> 之后的同级元素<div> 像这样：

d3.select("body").insert("p", "div + *")  // <-- insert before next element following div

D3.js - 在 HTML - <script></script> 位置添加元素

D3.js - Add elements in HTML - <script></script> location

html

javascript

workflow