gpt4 book ai didi

d3.js - 理解 enter() 和 exit()

转载 作者:行者123 更新时间:2023-12-04 17:31:33 25 4
gpt4 key购买 nike

根据我对 enter 的理解这段代码运行后在 D3 中的函数 div 的内容:

<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>

但相反我得到
    <div>
<p class="x"></p>
<p>4</p>
</div>

1)我错过了什么?据我了解 3应该应用于第一个 p4到 enter 函数之后的附加项。

2)我也不太明白 exit().remove() 的事情,据我了解,它应该删除附加的 p但它不是那么它有什么好处?

最佳答案

当你这样做时:

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

您正在选择所有 <p>所选 div 内的元素。你只有一个 div(没关系,因为 select 无论如何都会选择它得到的第一个...)并且只有 一个 <p>里面的元素。

然后,绑定(bind)数据:
.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>


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

    最后,如果您想更新 的文本现有 <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>

    关于d3.js - 理解 enter() 和 exit(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43356213/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com