gpt4 book ai didi

javascript - select().append() 和 select().data().enter().append() 的区别?

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:44:34 24 4
gpt4 key购买 nike

如果我有这个 HTML:

<body>
<div class="parent">
</div>
</body>

然后执行这段代码:

d3.select('div')
.append('span')
.html("I'm appended to div.parent")

这是我生成的 HTML

<body>
<div class="parent">
<span>I'm appended to div.parent</span>
</div>
</body>

但是,如果我执行这段代码:

d3.select('div')
.data([0,1]).enter() // This line of code was added.
.append('span')
.html("I'm appended to document")

span 被附加到 HTML 文档中。

<body>
<div class="parent">

</div>

</body>
<span>I'm appended to document</span>

我知道 selectAll() 重新定义了父元素,所以我的问题不是为什么第二个语句不起作用,而是为什么第一个语句起作用?根据这个逻辑,d3.select('div').append('span') 不应该重新定义父元素并将 span 附加到文档元素。为什么不是这样?

最佳答案

append方法只是在每个选定元素内附加一些内容,使第一个示例相当直观。

对于第二个示例,您知道 enter调用为每个需要根据 data 添加的新元素返回一个充满“占位符”的选择.但是“占位符”并不真正解释正在发生的事情。 documentation for .enter() 解释:

Another way to think about the entering placeholder nodes is that they are pointers to the parent node (in this example, the document body); however, they only support append and insert. Once elements have been inserted, their indices will reflect the new positions and not necessarily start from zero or be continuous.

所以,在这两个例子中,父节点仍然是<body> ,仅仅是因为您没有链接两个或更多 select/selectAll电话。它们之间的区别是什么是append编辑到 - 所选 <div>在第一个示例中,在第二个示例中是原始选择的父节点。

顺便说一下,谢谢你提出的好问题;它让我更多地思考这些东西如何以及为何起作用,而不仅仅是它的作用。

关于javascript - select().append() 和 select().data().enter().append() 的区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32053453/

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