Javascript D3JS selectAll以追加rect

我对d3.js可视化数据的简洁性感到惊讶。这种简洁背后隐藏的复杂性也让我们有点难以理解它是如何工作的。下面是源代码的一部分

问题是它如何在创建的svg数量内（var svg=d3…）为天创建rect。在语句

svg.selectAll（“rect.day”）

中，我不确定它如何为每个svg追加rect（selectAll尝试选择rect.day！）

你看过吗？它非常清楚地解释了数据联接的工作原理——本质上，在D3中，您可以使用

.selectAll（）

将数据联接到一个选择，然后根据需要使用

.enter（）

附加新元素。所以

svg.selectAll("rect.day")
    .data( ... )
  .enter().append("rect")
    .class("day")

---

根据数据，根据需要创建新的

rect

元素。

谢谢。那篇文章解释得很好。但是，为什么selectAll（“rect.day”）而不是selectAll（“rect”）。当我尝试时，这两种方法都奏效了。我想我被#selection.selectAll（选择器）和#d3.selectAll（选择器）弄糊涂了。如果你的vis中有其他类型的

rect

元素，

。selectAll（“rect”）

不知道要查找哪些元素，会选择所有元素，可能会删除或修改不希望接触的现有图元。因此，在复杂的vis中，按类选择通常是一个好主意。

svg.selectAll("rect.day")
    .data( ... )
  .enter().append("rect")
    .class("day")