Question

根据我对D3中10 OPEN 3,8,3, "O:DATA FILE,S,W" 20 PRINT#3, "SENT TO DISK" 30 CLOSE 3函数的理解，此代码运行后div的内容：

enter

应该是：

<body>
    <div>
        <p class="x"></p>
    </div>
    <script>
        d3.select('div')
            .selectAll('p')
            .data([3, 4])
            /**
             * if I uncomment this it works 
             * but I don't want to call the
             * same function twice
             */
            // .text(d => d + '')
            .enter()
            .append('p')
            .text(d => d + '');
    </script>
</body>

但我得到了

    <div>
        <p class="x">3</p>
        <p>4</p>
    </div>

1）我错过了什么？根据我的理解，<div> <p class="x"></p> <p>4</p> </div>应该在输入函数后应用于第一个3和p到附加的一个。

2）另外我还没有得到exit（）。remove（）的东西，根据我的理解，它应该删除附加的4，但它不是那么它有什么用呢？

Answer 1

执行此操作时：

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

您正在选择所选div中的所有<p>元素。你只有一个div（没关系，因为select选择了它得到的第一个......）并且只有一个 <p>元素。

然后，绑定数据：

.data([3, 4])

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

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

现在出现了关于“输入”选择的重要部分：您的选择中已经有一个<p>元素。 <p>元素获取第一个数据3。剩余的数据将附加到新创建的p元素4。

您的“输入”选择包含没有相应元素的所有数据点。如您所见，由于您在选择中有1个元素和2个数据点，因此“输入”选择只有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>

简而言之，您必须将选择与数据进行比较：如果您拥有的数据多于元素，则额外数据将绑定到属于“输入”选择的元素。如果元素多于数据，则没有相应数据的额外元素属于“退出”选择。在您的情况下，“退出”选择为空。

最后，如果您要更新现有 <p>元素的文字，则必须使用“更新”选项：

var p = d3.select('div')
  .selectAll('p')
  .data([3, 4]);

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>

理解enter（）和exit（）

1 个答案: