`

d3中选择器后的enter()

    博客分类:
  • D3
阅读更多

enter()

 

先看一个例子:

1
2
3
4
5
<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元素。

分享到:
评论

相关推荐

    recard_德卡D3_读卡器_

    德卡 D3 读卡器实现读取卡号的基本功能。

    德卡d3读卡器sdk+demo

    德卡d3读卡器sdk+demo,附件中包含源码,sdk,希望能给大家带来帮助

    IC读卡器D3-U开发工具

    D3型非接触式IC卡读写器(D3-U)剑龙系列中D3型是一款简单易用的M1卡专用读写器,可读写Mifare S50,采用了D8的核心技术,通过RS232串口或USB口实现同PC机及相关设备的连接,USB采用无驱技术。具有更简单、稳定和低...

    d3d9工具包

    d3d9工具

    d3.js下载后的文件

    d3.js下载后的文件d3.js下载后的文件d3.js下载后的文件d3.js下载后的文件d3.js下载后的文件d3.js下载后的文件d3.js下载后的文件

    D3D中文翻译

    D3D中文翻译.doc

    德卡D3读卡器测试程序驱动文件

    D3读卡器驱动,读写M1卡测试的小程序,这个小程序可以帮助你在D3读写卡上读写M1卡的各种操作

    D3Explor D3Explor

    D3Explor D3Explor D3Explor D3Explor D3Explor D3Explor D3Explor

    mbostock-d3和示例页面

    可以帮助你将数据绑定到HTML文档中...D3使用jQuery和CSS选择器在你的HTML文档中选择元素,然后转换它们,比直接使用JavaScript更容易。D3能够处理多种数据格式,包括XML、CSV和JSON等,并包含了简单遍历数据集的功能。

    timeplunk:d3 的小时间线选择器

    时光飞逝d3 的小时间线选择器。 用于在时间线上显示和规范化事件,并允许范围选择(画笔)。安装您可以从凉亭安装: $ bower install timeplunk 或者,您可以克隆存储库或下载timeplunk.js文件。依赖关系d3、d3-tip...

    HCFA禾川SV-D3E系列伺服驱动器使用说明书V1.3.rar

    HCFA禾川SV-D3E系列伺服驱动器使用说明书

    d3dx9 d3dx10 的各个版本,比如d3dx9_25

    d3dx9 d3dx10 的各个版本,游戏不能启动时,一定要下载这个 d3dx9_25 d3dx9_26 d3dx9_27 d3dx9_28 d3dx9_29 d3dx9_30 d3dx9_31 d3dx9_32 d3dx9_33 d3dx9_34 d3dx9_35 d3dx9_36 d3dx9_37 d3dx9_38 d3dx9_39 d3dx9_40 ...

    NVAPI抓屏传递给D3D11(D3D9到D3D11的数据传递)

    1、用NVAPI 进行D3D9抓屏,抓屏后创建HANDLE进行数据交换 2、D3D11利用D3D9传入的HANDLE使用OpenSharedResource来打开句柄实现D3D9到D3D11的数据传递 需要的库 1、NVAPI 安装完成后需要运行NVIDIA Capture SDK\bin...

    d3关系图谱.html

    最近工作需要完成一个股权穿透图,找了好多文档发现都不满足需求,最终选择d3.js来实现,包含子集的收缩展开,交互以及其他功能。之前由于没做过类似关系图以及不了解d3,踩了很多坑,我会尽可能将代码描述清楚...

    D3 D3-U 读写器开发接口及调试程序

    D&C德卡D3及D3-U射频卡读写器开发接口及调试工具,安装后在安装文件夹下可找到DELPHI C# FOXPRO PB调用的范例。

    D3中文api手册

    D3中文API手册。 D3 是最流行的可视化库...它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图

    D3 API 中文手册

    关于D3的API中文手册

    d3js-v4中文文档.pdf

    D3 V4版本中文API文档PDF版,与V3版本不同之处就在于添加了canvas功能,同时API的调用方式也有所改动,比如axis、layout.tree等等

    D3_RFID读卡器开发手册.pdf

    D3_RFID读卡器开发手册.pdf

Global site tag (gtag.js) - Google Analytics