javascript - 为什么我的d3数据在正文之后输出？

这是一个简单的页面，演示了d3的一些基本功能。我制作了一个数据集var数据集= [3,1,4,1,5];并希望将其以及一些段落输出。数据正在出现，但在正文之后!奇怪的 ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> demo project</title>
    <script type="text/javascript" src="d3/d3.v2.js"></script>
</head>
<body>

    <script type="text/javascript">
        d3.select("body").append("p").text("hello!");
        d3.select("p").append("text").text(" hello!!");
        d3.select("body").append("p").text("hello2!");
        d3.select("p:nth-child(3)").append("text").text(" hello2!!");
        var dataset = [3,1,4,1,5];
        d3.select("p:nth-child(3n+1)")
            .data(dataset)
            .enter()
            .append("p")
            .text(function(d) { return d; });
        d3.select("p:nth-child(7n + 1)").append("text").text("hello againss?");
    </script>

</body>
</html>

该页面如下所示:

并且DOM如下所示(注意，数据显示在body close标签之后):

还请注意，d3.select(“p:nth-child(7n + 1)”)。append(“text”)。text(“hello againss？”);本来打算在我的所有数据之后打印，但是没有显示出来。

最佳答案

简短的答案是，在您的特定情况下，enter()选择的parentNode是document(而不是body)。

让我们以一个简单的示例来看一下enter()选择的外观。假设我们有一个带有主体的文档，其中没有任何p元素。

var ps = d3.select("body").selectAll("p")
    .data([0, 1, 2]);

由于尚不存在p个元素，所以enter()选择将包含三个元素。让我们检查回车选择:

您会看到内部数组具有一个名为parentNode的属性。当您使用selection.append()或selection.insert()添加新元素时，新元素将被创建为该parentNode的子元素。

因此，检查ps.enter()[0].parentNode将显示body元素。现在清楚的是，在数据联接中，selectAll之前的选择指定了parentNode；在上述情况下为d3.select("body")。

如果我们在数据连接中省略了select(“body”)部分，该怎么办？

// example of bad data join
var ps2 = d3.selectAll("p")
    .data([0, 1, 2]);

事实证明，在这种情况下ps2.enter()[0].parentNode是#document!这意味着，如果使用此enter()选择添加元素，则它们将成为文档的直接子元素。 append方法会将它们添加到文档末尾；即在 body 之后。

最后一种情况基本上就是您遇到的情况。您的数据联接和输入表达式不正确；它应该遵循以下模式:

d3.select(parent).selectAll(element)
    .data(data)
  .enter().append(element);

顺便说一句，没有HTML text元素。因此，append("text")似乎没有意义。