当您执行此操作时：

d3.select('div')
    .selectAll('p')

您正在选择所选div中的所有<p>元素。你只有一个div（这没关系，因为select选择它得到的第一个div），并且里面只有一个<p>元素。
然后，绑定数据：

.data([3, 4])

因此，到目前为止，我们有：

• 选择中的1个元素
• 数据中的2个数据点

现在是关于“进入”选择的重要部分：你已经有一个<p>元素在你的选择. <p>元素获取第一个数据3。剩余的数据被附加到新创建的p元素，即4。
您的“enter”选项包含所有数据点，但没有相应的元素。正如您所看到的，由于选择中有1个元素和2个数据点，因此您的“enter”选择只有1个元素。让我们展示一下（看看控制台）：

var enterSelection = d3.select('div')
  .selectAll('p')
  .data([3, 4])
  .enter()
  .append('p')
  .text(d=>d);

console.log("Elements in the enter selection: " + enterSelection.nodes().length)

<script src="https://d3js.org/d3.v4.min.js"></script>
<div>
  <p class="x"></p>
</div>

简而言之，你必须将选择与数据进行比较：如果你有比元素更多的数据，多余的数据将被绑定到属于“enter”选择的元素。如果元素多于数据，则没有相应数据的额外元素属于“exit”选择。在您的情况下，“退出”选项为空。
最后，如果你想更新existing<p>元素的文本，你必须使用“update”选项。它可以更详细一点，像这样：

let p = d3.select('div')
  .selectAll('p')
  .data([3, 4]);

const pEnter = p.enter()
  .append('p')
  .text(d => d);
  
p.text(d => d);

<script src="https://d3js.org/d3.v4.min.js"></script>
<div>
  <p class="x"></p>
</div>

或者你可以合并输入选择和更新选择，用一个稍微小一点的代码：

let p = d3.select('div')
  .selectAll('p')
  .data([3, 4]);

p = p.enter()
  .append('p')
  .merge(p)
  .text(d => d);

<script src="https://d3js.org/d3.v4.min.js"></script>
<div>
  <p class="x"></p>
</div>

在这两个示例中，更新选择都被命名为p。