这些方法的优点和缺点是什么

Question

这两种方法的优缺点是什么？是什么控制了条的飞行方向，例如从上到下或从左到右？为什么bar.exit().remove()不适用于选项2？

选项1https://jsfiddle.net/2523onr3/选项2https://jsfiddle.net/sjp700/2523onr3/3/

bar.exit().remove()
svg.selectAll(".bar").remove();

Answer 1

这里有两种截然不同的方法。

第一种选择：

bar.exit().remove()

是一个恰当的"退出"选择。这就是它的作用：

给定您的更新选择。。。

var bar = svg.selectAll(".bar")
.data(dataset, function(d) {
return d.label;
});

您的退出选择将数据与所选DOM元素进行比较。如果您的元素多于数据，则额外的元素(即没有数据的元素)将填充此选择。然后，执行remove()时，将删除此选择中存在的元素。

在执行remove()之前，您可以对退出选择执行任何您想要的转换：向右、向左、向上移动、更改颜色、更改不透明度等。因此，您不仅在退出选择中，而且在进入和更新选择中控制"条形图的飞行方式"。

另一方面，你的第二个选择。。。

svg.selectAll(".bar").remove();

只需选择一个名为bar的类的所有内容(它可以是圆形、文本、矩形、五边形，这无关紧要…)，并删除该类的所有元素。