Data Join

优质
小牛编辑
136浏览
2023-12-01

数据连接是D3.js中的另一个重要概念。 它与选择一起使用,使我们能够根据我们的数据集(一系列数值)操作HTML文档。 默认情况下,D3.js在其方法中为数据集提供最高优先级,并且数据集中的每个项对应于HTML元素。 本章详细介绍了数据连接。

什么是数据加入?

数据连接使我们能够根据现有HTML文档中的数据集注入,修改和删除元素(HTML元素以及嵌入的SVG元素)。 默认情况下,数据集中的每个数据项对应于文档中的元素(图形)。

随着数据集的变化,也可以轻松地操作相应的元素。 数据连接在我们的数据和文档的图形元素之间创建了一种紧密的关系。 数据连接使得基于数据集的元素操作变得非常简单和容易。

数据加入如何工作?

数据连接的主要目的是使用给定的数据集映射现有文档的元素。 它根据给定的数据集创建文档的虚拟表示,并提供使用虚拟表示的方法。 让我们考虑一个简单的数据集,如下所示。

[10, 20, 30, 25, 15]

数据集有五个项目,因此可以映射到文档的五个元素。 让我们使用选择器的selectAll()方法和数据连接的data()方法将它映射到以下文档的li元素。

HTML

<ul id = "list">
   <li><li>
   <li></li>
</ul> 

D3.js code

d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

现在,文档中有五个虚拟元素。 前两个虚拟元素是文档中定义的两个li元素,如下所示。

1. li - 10
2. li - 20

对于前两个li ,我们可以使用所有选择器的元素修改方法,如attr(), style(), text()等,如下所示。

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

text()方法中的函数用于获取li元素映射数据。 这里, d表示第一个li元素为10,第二个li元素为20。

接下来的三个元素可以映射到任何元素,可以使用数据连接的enter()和selector的append()方法完成。 enter()方法提供对剩余数据的访问(未映射到现有元素),append()方法用于从相应数据创建新元素。 让我们为剩余的数据项创建li 。 数据图如下 -

3. li - 30
4. li - 25
5. li - 15

创建新的li元素的代码如下 -

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) 
      { return "This is dynamically created element and the value is " + d; });

数据连接提供了另一种称为exit() method用于处理从数据集中动态删除的数据项,如下所示。

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

在这里,我们使用exit()和remove()方法从数据集及其对应的li中删除了第四项。

完整的代码如下 -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>
   <body>
      <ul id = "list">
         <li></li>
         <li></li>
      </ul>
      <input type = "button" name = "remove" value = "Remove fourth value" 
         onclick = "javascript:remove()" />
      <script>
         d3.select("#list").selectAll("li")
            .data([10, 20, 30, 25, 15])
            .text(function(d) 
               { return "This is pre-existing element and the value is " + d; })
            .enter()
            .append("li")
            .text(function(d) 
               { return "This is dynamically created element and the value is " + d; });
         function remove() {
            d3.selectAll("li")
            .data([10, 20, 30, 15])
            .exit()
            .remove()
         }
      </script>
   </body>
</html>

上述代码的结果如下 -

<!--

Fourth item removed

-->

数据连接方法

数据连接提供以下四种方法来处理数据集 -

  • datum()
  • data()
  • enter()
  • exit()

让我们详细介绍这些方法。

The datum() Method

datum()方法用于为HTML文档中的单个元素设置值。 一旦使用选择器选择元素,就会使用它。 例如,我们可以使用select()方法选择现有元素(p标签),然后使用datum()方法设置数据。 设置数据后,我们可以更改所选元素的文本或添加新元素,并使用datum()方法设置的数据分配文本。

创建页面“datajoin_datum.html”并添加以下代码 -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>
   <body>
      <p></p>
      <div></div>
      <script>
         d3.select("p")
         .datum(50)
         .text(function(d) { 
            return "Used existing paragraph element and the data " + d + " is assigned."; 
         });
         d3.select("div")
         .datum(100)
         .append("p")
         .text(function(d) { 
            return "Created new paragraph element and the data " + d + " is assigned."; 
         });
      </script>
   </body>
</html>

上述代码的输出如下。

The data() method

data()方法用于将数据集分配给HTML文档中的元素集合。 使用选择器选择HTML元素后使用它。 在我们的列表示例中,我们使用它来设置li选择器的数据集。

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15]);

The enter() method

enter()方法输出之前没有图形元素的数据项集。 在我们的列表示例中,我们使用它来创建新的li元素。

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) { return "This is dynamically created element and the value is " + d; });

The exit() method

exit()方法输出不再存在数据的图形元素集。 在我们的列表示例中,我们使用它通过删除数据集中的数据项来动态删除其中一个li元素。

function remove() {
   d3.selectAll("li")
      .data([10, 20, 30, 15])
      .exit()
      .remove()
}

数据功能

在DOM操作章节中,我们了解了D3.js中的不同DOM操作方法,例如style(), text()等。这些函数中的每一个通常都以常量值作为参数。 然而,在Data join的上下文中,它将匿名函数作为参数。 此匿名函数获取相应的数据和使用data()方法分配的数据集的索引。 因此,将为绑定到DOM的每个数据值调用此匿名函数。 考虑以下text()函数。

.text(function(d, i) {
   return d;
});

在此函数中,我们可以应用任何逻辑来操作数据。 这些是匿名函数,意味着没有与函数关联的名称。 除了data(d)和index(i)参数之外,我们可以使用this关键字访问当前对象,如下所示 -

.text(function (d, i) {
   console.log(d); // the data element
   console.log(i); // the index element
   console.log(this); // the current DOM object
   return d;
});

请考虑以下示例。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>
   <body>
      <p></p>
      <p></p>
      <p></p>
      <script>
         var data = [1, 2, 3];
         var paragraph = d3.select("body")
         .selectAll("p")
         .data(data)
         .text(function (d, i) {
            console.log("d: " + d);
            console.log("i: " + i);
            console.log("this: " + this);
            return "The index is " + i + " and the data is " + d;
         });
      </script>
   </body>
</html>

上面的脚本将生成以下结果 -

在上面的例子中,参数“d”为您提供数据元素,“i”为您提供数组中的数据索引,“this”是当前DOM元素的引用。 在这种情况下,它是段落元素。 请注意,我们在上面调用了.data(数据)函数。 data()函数为所选元素提供数据,在我们的例子中它是数据数组。

最后更新:

类似资料

  • 视图移动以及缩放是一种将用户注意力聚焦在感兴趣区域的一种流行的交互技术。操作直接,容易理解: 点击并拖拽平移,使用滚轮进行缩放,当然也可以通过触摸进行。平移和缩放被广泛的应用在地图中,但是也可被应用到其他的可视化比如时间序列以及散点图中。 缩放行为通过 d3-zoom 模块实现,能方便且灵活到 selections 上。它处理了许多 Installing NPM 安装: npm install d

  • 这个模块实现了用来计算一组二维点 Voronoi diagram(泰森多边形) 或 Delaunay triangulation(德劳内三角剖分) 的 Steven J. Fortune’s algorithm 算法。这个模块的实现大多是基于 Raymond Hill 的工作。 泰森多边形不仅仅在视觉上具有吸引力,在交互方面也非常实用,比如在散点图中增加点的目标面积。参考 “Strikeouts

  • transition 是一个类 selection 的接口,用来对 DOM 进行动画修改。这种修改不是立即修改,而是在规定的事件内平滑过渡到目标状态。 应用过渡,首先要选中元素,然后调用 selection.transition,并且设置期望的改变,例如: d3.select("body") .transition() .style("background-color", "red")

  • 这个模块提供了一个高效的队列,能管理上千并发动画同时保证与并发或分段动画一致的同步时序。在内部使用 requestAnimationFrame 进行 fluid animation(如果支持的话),否则切换使用 setTimeout来实现。 Installing NPM 安装: npm install d3-timer. 此外还可以下载 latest release。也可以直接从 d3js.org

  • 在可视化时间序列数据、分析时间模式或处理一般时间时,常规时间单位的不规则性很快就变得明显起来。在 Gregorian calendar(公历) 中,大多数月份有 31 天但是有些月份只有 28 或者 29、30 天。大多数年份有 365 天但是 leap years(闰年) 有 366 天。在 daylight saving(夏令时) 中一天可能有 23 25 小时。更复杂的是世界各地的夏时制不同

  • 可视化通常由离散图形标记组成, 比如 symbols, arcs, lines 和 areas。虽然条形的矩形可以很容易的使用 SVG 或者 Canvas 来生成, 但是其他的比如圆形的扇形以及向心 Catmull-Rom 样条曲线就很复杂。这个模块提供了许多图形生成器以便使用。 与 D3 的其他特性一样,这些图形也是又数据驱动的: 每个图形生成器都暴露了一个如何将数据映射到可视化表现的访问器。例