d3中选择器后的enter（）

最新推荐文章于 2020-12-07 15:59:08 发布

fengxfengx

最新推荐文章于 2020-12-07 15:59:08 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： D3

本文链接：https://blog.youkuaiyun.com/fengxfengx/article/details/84793680

1 篇文章

订阅专栏

D3.js的enter()函数用于在数据绑定后创建缺失的DOM元素。当DOM元素数量少于数据项时，enter()会选择虚拟DOM或占位符，并配合append()来实际添加元素，实现数据驱动的DOM创建。示例代码展示了如何使用enter()和append()动态创建p元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

enter()

先看一个例子：

          <body>
         
          <p></p> 
         
          <p></p> 
         
          <p></p> 
         
          </body>

执行代码：

1	`d3.select(` `"body"` `).selectAll(` `"p"` `).data([1, 2, 3])`

这里，data()是用来绑定数据到选择的DOM元素上.这样以后，就可以针对这些数据做一些相关操作，比如设置元素宽度等。

当DOM数量少于data的数量，或者压根一个都没有的时候，我们一般会希望让程序帮忙创建。

下面的例子，我们没有事先提供DOM元素：

1 2	`<body>` `</body>`

仍旧执行：

1	`d3.select(` `"body"` `).selectAll(` `"p"` `).data([1, 2, 3])`

与上面例子不同的是，上面的例子中我们可以继续执行.style("width", "100px")等操作。但这里我们不能了，因为我们没有选择到DOM元素，需要先创建。

enter()是用来在绑定数据之后，选择缺少的那部分DOM元素。我们可能会疑惑，既然是缺少的部分，怎么选择呢？这里就需要我们发挥一点想象力，想象我们选择了一些不存在的东西。我们可以称之为“虚拟DOM”或“占位符(placeholder)”。

enter()只是进行选择，并未实际添加所需DOM元素。因此在enter()之后一般都会配合append()来进行DOM元素的实际创建。

由此以来，我们使用 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") 即可根据数据自动创建所需的DOM元素。