D3.js数据集 最后更新时间：2021年03月23日 数据连接是D3.js中的另一个重要概念。它与选择一起使用，使我们能够根据我们的数据集（一系列数值）操作HTML文档。 默认情况下，D3.js在其方法中为数据集提供最高优先级，并且数据集中的每个项对应于HTML元素。 ### 什么是数据加入？ 数据连接使我们能够根据现有HTML文档中的数据集注入，修改和删除元素（HTML元素以及嵌入的SVG元素）。 默认情况下，数据集中的每个数据项对应于文档中的元素（图形）。 随着数据集的变化，也可以轻松地操作相应的元素。 数据连接在我们的数据和文档的图形元素之间创建了一种紧密的关系。 数据连接使得基于数据集的元素操作变得非常简单和容易。 ### 数据加入如何工作？ 数据连接的主要目的是使用给定的数据集映射现有文档的元素。它根据给定的数据集创建文档的虚拟表示，并提供使用虚拟表示的方法。 以上内容摘自[wiki](https://iowiki.com/d3js/d3js_data_join.html "wiki") ## 数据连接方法 数据连接提供datum(),data(),enter(),exit()四种方法来处理数据集。 ### datum() datum()可以连接单个的数据，对html文档单个的元素设置值。一旦使用选择器选择元素，就会使用它。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div> 1 </div> <script> d3.select("body").selectAll("div") .datum("这是一个测试的值") //用datum（）连接单个数据。 .text(function(d){ return "返回值："+d; }); //将值修改添加到相应的元素中。 </script> </body> </html> ``` ### data() data()可以连接数据集，对html文档的元素集设置值。使用选择器选择HTML元素后使用它。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script> d3.select("body").selectAll("div") .data(["第一个测试","第二个测试","第三个测试"]) //用data()连接数据集。 .text(function(d){ return "返回值："+d;}); //将值修改添加到元素中。 </script> </body> </html> ``` ### enter() enter()方法输出之前数据集中数据没有对应的元素。 示例： （1）使用enter()添加： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script> d3.select("body").selectAll("div") .data(["第一个测试","第二个测试","第三个测试","第四个元素","第五个元素"]) //用data()连接数据集。 .text(function(d){ return "返回值："+d;})//将值修改添加到元素中。 .enter().append("div") //使用enter再使用append()添加元素。 .text(function(d){ return "返回值："+d;}); //将值修改添加到元素中。 </script> </body> </html> ``` 将此段文档复制到新建文件中，打开可以看出，文档生成了原本不存在的两个div标记。 （2）不使用enter ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script> d3.select("body").selectAll("div") .data(["第一个测试","第二个测试","第三个测试","第四个元素","第五个元素"]) //用data()连接数据集。 .text(function(d){ return "返回值："+d;})//将值修改添加到元素中。 .append("div") .text(function(d){ return "返回值："+d;}); //将值修改添加到元素中。 </script> </body> </html> ``` 将此段文档复制到新建文件中，打开会发现，其结果是在每一个原有的div里面添加了一个新的div，然后添加数据。 ### exit() exit()与enter()类似，该方法是可以对多出的元素进行操作。 该方法结合remove()方法可以将多出的元素删除。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id = "one">1</div> <div id = "two">2</div> <div id = "three">3</div> <div id = "four">4</div> <script> d3.select("body").selectAll("div") .data(["第一个测试","第二个测试","第三个测试"]).text(function(d){ return "返回值："+d })//将值修改添加到元素中。 .exit().remove();//将数据集中没有对应数据的元素删除。 </script> </body> </html> ```
Comments | NOTHING