D3的应用非常广泛，现在成为了主流数据可视化工具之一。大家在刚接触使用d3.js的时候，感到最吃力的地方是data(), enter(), exit()这几个操作。
在我接触一段时间，有了一些了解之后，简单说说我的理解。
data()
先看一个例子：
<body> <p></p> <p></p> <p></p> </body>
执行代码：
d3.select("body").selectAll("p").data([1, 2, 3])
这里，data()是用来绑定数据到选择的DOM元素上.这样以后，就可以针对这些数据做一些相关操作，比如设置元素宽度等。
从表面上，并不能看出什么变化。但在内部，它是在对应的DOM元素上添加了一个__data__属性，可以通过document.getElementsByTagName("p")[0].__data__看到。
enter()和exit()
这两个操作令人困惑是因为单从名字上看，很难推断出它们的作用。
在上面data()的例子中，我们的DOM元素和数据的个数是一样的。但如果不一样的话，我们该怎么办？
enter()和exit()就是用来处理这种情况的。
enter()
当DOM数量少于data的数量，或者压根一个都没有的时候，我们一般会希望让程序帮忙创建。
下面的例子，我们没有事先提供DOM元素：
<body> </body>
仍旧执行：
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元素。
enter的处理方法
如果没有足够的元素，那么处理方法通常是使用append()添加元素。请看下面的代码：
<body>
<p></p>
<script>
var dataset = [3, 6, 9];
var p = d3.select("body").selectAll("p");
//绑定数据后，分别获取update和enter部分
var update = p.data(dataset);
var enter = update.enter();
//update部分的处理方法是直接修改内容
update.text( function(d){ return d; } );
//enter部分的处理方法是添加元素后再修改内容
enter.append("p")
.text(function(d){ return d; });
</script>
</body>
本例中，body中的p元素只有一个，但是数据有三个，因此enter部分包含多余的两个数据。对多余数据的处理方法就是append元素，与之对应。经过处理后，body里有三个p元素，内容分别为：
<p>3</p> <p>6</p> <p>9</p>
通常，从服务器读取文件后，数据是有的，但是网页中是没有元素的。这是D3一个很重要的特性，即可以选择一个空集，然后使用enter().append()的形式来插入元素。假设现在body里没有p元素，请看如下代码：
var dataset = [10,20,30,40,50];
var body = d3.select("body");
body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集
.data(dataset) //绑定dataset数组
.enter() //返回enter部分
.append("p") //添加p元素
.text(function(d){ return d; });
上述代码中，selectAll选择了一个空集，然后绑定了数据。由于选择集为空，那么data()返回的update部分为空。然后调用enter()和append()，使得每一个数据都有元素p与之对应。最后再更改p元素的内容。即enter部分的常见处理方法是使用append()添加元素。
exit()
与enter()相反，exit()是用来选择那些与数据相比多出来的DOM元素。
在下面例子中，我们多提供了一个DOM元素：
<body> <p></p> <p></p> <p></p> <p></p> </body>
这回就容易理解了，因为是多出来的，那么就是实际存在的，即最后一个<p>。
多出来的话，我们可以接着用.remove()移除这些元素，代码如下：
d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();
exit的处理方法
有多出的元素，没有数据与之对应。对于这样的元素，通常的做法是使用remove()删除元素。假设body中有5个p元素，请看如下代码：
var dataset = [10, 20, 30];
var p = d3.select("body").selectAll("p");
//绑定数据之后，分别获取update部分和exit部分
var update = p.data(dataset);
var exit = update.exit();
//update的部分的处理方法是修改内容
update.text( function(d){ return d; } );
//exit部分的处理方法是删除
exit.remove();
这段代码中，对于exit部分的处理方法是删除。删除之后，网页中将不会有多余的p元素。
参考资料
"Thinking with Joins" - by Mike Bostock
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。