D3中是否需要退出选择？
[英]Is exit selection necessary in D3?
问题描述
I created this simple example using data join in D3.
我使用 D3 中的数据连接创建了这个简单的示例。 It works: when user clicks on +1 a green is added to the list, when clicks on -1 the last color in the list is removed.它起作用：当用户点击+1时， green被添加到列表中，当点击-1时，列表中的最后一种颜色被删除。
Here the code:这里的代码：
const colors = ["white", "yellow", "red", "brown", "orange"]; const root = d3.select("#root"); const addColor = d3.select("#add-color"); addColor.on("click", (d) => { colors.push("green"); update(); }); const removeColor = d3.select("#remove-color"); removeColor.on("click", (d) => { colors.pop(); update(); }); const ul = root.append("ul"); ul.selectAll("li").data(colors).join( (enter) => enter.append("li").text((d) => d), (update) => update, (exit) => exit.remove() ); function update(){ ul.selectAll("li").data(colors).join( (enter) => enter.append("li").text((d) => d), (update) => update, (exit) => exit.remove() ); }
#buttons-container { display: flex; margin-bottom: 30px; } #buttons-container div { min-width: 30px; text-align: center; cursor: pointer; border: 1px solid black; margin-right: 50px; }
<:DOCTYPE html> <meta charset="utf-8" /> <html> <body> <div id="root"> <div id="buttons-container"> <div id="add-color">+1</div> <div id="remove-color">-1</div> </div> </root> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js" ></script> <script type="text/javascript" src="./index.js"></script> <script type="text/css" src="./styles.css"></script> </body> </html>
Then I commented the exit action:然后我评论了退出动作：
function update() {
ul.selectAll("li")
.data(flavors, (d) => d)
.join(
(enter) =>
enter
.append("li")
.text((d) => d)
.style("color", "green"),
(update) => update.style("color", "steelblue"),
//(exit) => exit.style("color", "red").remove()
);
}
And it works in the same way.它以同样的方式工作。 What am I missing?我错过了什么？ Is exit necessary?有必要exit吗？
3 个解决方案
解决方案1
3 2021-03-01 17:43:23
解决方案2
2 2021-03-01 20:56:05
The join method is a recent addition to d3 that manages the full update pattern (enter, update, exit). join 方法是最近添加到 d3 的，它管理完整的更新模式（进入、更新、退出）。
It can be used in the most simple way, without specifying any part of the pattern, eg,它可以以最简单的方式使用，无需指定模式的任何部分，例如，
ul.selectAll("li")
.data(flavors, (d) => d)
.join("li")
.text((d) => d)
.style("color", "green");
In short, this code above will deal with the append part, will update existing elements and will remove any not needed.简而言之，上面的代码将处理 append 部分，将更新现有元素并删除任何不需要的元素。 Its equivalent to:它相当于：
var list = ul.selectAll("li")
.data(flavors, (d) => d);
list.enter()
.append("li")
.merge("list")
.text((d) => d)
.style("color", "green");
list.exit().remove();
if we want to add specific actions for a part of the pattern, than we can specify each one.如果我们想为模式的一部分添加特定的操作，我们可以指定每个操作。
In your case, if you only want to differentiate the colors of the enter and update, then you don't need to specify the exit part.在你的情况下，如果你只想区分进入和更新的colors，那么你不需要指定退出部分。
解决方案3
1 已采纳 2021-03-01 23:51:42
Just to add to the already existing answers, your question's title is a bit misleading.只是为了添加到已经存在的答案，你的问题的标题有点误导。 Let's see your title and some variants:让我们看看您的标题和一些变体：
-
"Is [the] exit selection necessary in D3?"
“在 D3 中是否需要选择退出？”No, it's not.
不，这不对。 You can perfectly have a D3 code without an exit selection.您可以完美地拥有没有退出选择的 D3 代码。 Actually, you can even have an exit selection without calling selection.remove(), that is, you can do another stuff with the exit selection other than just removing the elements (for instance, setting a different colour).实际上，您甚至可以在不调用selection.remove()的情况下进行退出选择，也就是说，您可以对退出选择执行其他操作，而不仅仅是删除元素（例如，设置不同的颜色）。 That brings us to another question:这给我们带来了另一个问题： -
"Is [the] exit selection synonymous with 'elements to be removed'?"
“[the] exit selection 是 'elements to be removed' 的同义词吗？”No, it's not.
不，这不对。 -
"Is [the] exit selection necessary in a dynamic data visualisation?"
“在动态数据可视化中是否需要退出选择？”Generally yes, but again that's not necessary .
通常是的，但同样没有必要。 So the adequate answer is no .所以充分的答案是否定的。 -
"Is [the] exit selection necessary in
selection.join()?"“在selection.join()中是否需要退出选择？”I believe that this is the question you're asking.
我相信这是你要问的问题。 Well, the exit selection is already there, as the other answers pointed.好吧，正如其他答案所指出的那样，退出选择已经存在。 Here's a brief explanation:这里有一个简短的解释：
If you look at the source code , which is quite small, you'll see:如果您查看非常小的源代码，您会看到：
export default function(onenter, onupdate, onexit) {
var enter = this.enter(), update = this, exit = this.exit();
enter = typeof onenter === "function" ? onenter(enter) : enter.append(onenter + "");
if (onupdate != null) update = onupdate(update);
if (onexit == null) exit.remove(); else onexit(exit);
return enter && update ? enter.merge(update).order() : update;
}
Thus, as you can see in this line...因此，正如您在这一行中看到的......
if (onexit == null) exit.remove(); else onexit(exit);
...if you explicitly set an exit function (here the parameter named onexit ) the code will call it, otherwise it will simply do exit.remove() , which is actually this.exit.remove() , where this is the selection. ...如果您显式设置退出 function （这里是名为onexit的参数）代码将调用它，否则它将简单地执行exit.remove() ，实际上是this.exit.remove() ， this是选择.
Finally it's interesting to see that, as a convenient method, selection.join() assumes that the users want to remove the elements in the exit selection.最后有趣的是，作为一种方便的方法， selection.join()假设用户想要删除退出选择中的元素。 However, as I already explained, that's not necessary.但是，正如我已经解释的那样，这不是必需的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.