d3.js data-join（03）

最新推荐文章于 2022-07-03 13:50:46 发布

Sandy_Star

最新推荐文章于 2022-07-03 13:50:46 发布

阅读量1.2k

点赞数 5

分类专栏：前端文章标签： d3.js data-join javascript

本文链接：https://blog.csdn.net/weixin_48931875/article/details/113139419

版权

本文深入探讨了d3.js中的data-join机制，包括数据与图元的绑定、d3.join的三个状态（Update、Enter、Exit）以及如何利用data-join实现动态可视化。通过实例讲解如何通过keyFunction处理数据，以及如何从CSV文件中读取数据进行图表绘制。

摘要由CSDN通过智能技术生成

前言：本篇主要是d3.js里面的datajoin

一、什么是Data-join?

本质上是将数据与图元进行绑定

例如：

每个国家的人数绑定到矩形的长度
疫情感染的人数比例绑定到圆的半径

为什么要使用data-join？

使用data-join可以省去大量根据数据设置图元属性的代码量
对于动态变化的数据提供统一的接口
以数据为中心的可视化操作
- 根据数据的每个属性自动调整绑定图元的属性
不再需要手动添加、修改、删除图元
- 会根据Data-join的绑定自动推断
如果图元的数目不等于数据的条目，则根据数据条目的数量选定相应数量的图元

二、用函数设置图元属性

`selection.attr('attrbuteName',value)`

支持直接通过值来设置属性
支持通过函数来设置属性

`selection.attr('attrbuteName',(d,i) = >{...})`

d为绑定给图元的数据（即将到来）
i为图元的索引，是一个整数，如d3.selectAll(‘rect’)中的第几个矩形
函数也可以仅使用d=>{…},但此时函数体无法使用索引
即使不使用绑定的数据（如没有绑定数据），如需使用索引，仍需要完整的写出（d，i）=>{…}

三、数据与图元的绑定

`data（dataArray）`

(1)dataArray在保证是一个数组的前提下可以是任何形式

例如：[0,2,4,5,56,999,45,67]
例如：[{name:‘aaa’,age:18},{name:‘bbb’,age:15},{name:‘ccc’,age:90}]

(2)先考虑数据和图元数目相同的情况：

dataArray是一个数组，其中的每‘条’数据会与一个图元绑定（反之亦然）
绑定给每个图元的数据将对应.attr(,(d,i)=>{…})中的d
默认的绑定按照双方的索引顺序
不调用.data(…)，则图元不会与任何数据绑定
数据的更新只需要重新绑定另一个dataArray即可

四、d3.jd绑定数据的三个状态

在这里插入图片描述

Updata：图元和数据条目相同

Enter：数据的条目多于图元甚至没有图元，常用于第一次绑定数据

Exit：数据的条目少于图元甚至没有数据，常用于结束可视化

4.1Updata

有图元有数据

const p = maingroup.selectAll('.dataourve').data(data).attr(...).attr(...)

Updata作为实际可视化任务最常用的状态，经常被单独封装成一个函数
UpdataSelection.merge(enterSelection).attr(…).attr(…)
- 将两个Selection合并到一起操作
- enterSelection在与updataSelectio n merge之前要至少已经调用了append（…)语句添加好图元。
Updata经常与d3.js的动画一起使用

4.2Enter

有数据没图元，d3.jd会自动搞清楚哪些数据是新增的，根据新增的数据生成相应的图元。

生成图元的占位，占位内容需要编程者自行添加（append）

const p = maingroup.selectAll('.class').data(data).enter().append('').attr(...)

enter本质上生成指向父节点的指针，而append操作相当于在父节点后添加指针数量的图元并将其余多出的数据绑定。

4.3Exit

有图元没有数据，d3.js会自动“搞清楚”哪些图元是不绑定数据的

const p= maingroup.selectAll('.class').data(data).exit().remove()

4.4data-join的简洁形式

.data(...).join(...)
默认enter和updata的执行形式相同
默认exit是删除（remove）节点
默认data-join形式简洁但不灵活
- 必须需要设置enter数据的初始图元属性，updata会每次重新设置初始值，从而导致动画出现“奇怪”的效果
- 仍支持“定制”：
- ```
.join(enter => enter.append('text').attr('fill','green').text(d=>d),
updata =>(),exit=>())
```

五、让数据动起来

Updata经常与d3,js的动画一起使用

.transition().duration();
d3.selectAll('rect').data(data2,d=>d.name)
.transition().duration(3000).attr('width',d=>xScale(d.age))
//duration(...)中为毫秒

.transition(...)经过调用后，后续的链式调用会变成数值上的渐变，渐变的时间由.duration(...)决定
插值的方式由.ease(…)设定

六、关于Key

`.data(data,keyFunction)`

keyFunction的返回值通常是一个字符串（string）
keyFunction的定义根据数据，比如keyFunction = d = >d.name

selection.data(data,d=>d.name);
d3.selectAll('rect').data(data2,d=>d.name).attr('width',d=>xScale(d.age))

在绑定数据给图元时：

keyFunction为每条输入绑定的数据执行一次
keyFunction为每个包含数据的图元执行一次

如果图元之前没有绑定任何数据，则keyFunction会报错

第一次绑定时根据索引即可
实际的可视化任务，图元都是根据数据的“条”数动态添加（enter）、删除（exit）、只需要在添加时指定好DOM的ID即可

七、数据的读取

常见的是CSV数据。第一行为属性列表，后续每一行对应一条数据，CSV本质上是纯文本，区别于EXCEL的格式

d3.csv('path/to/data.csv').then(data=>{...})

.csv函数的返回值是一个js的‘Promise’对象（Promise对象用于执行异步操作）
.then(...)的参数为一个函数，参数为.csv(...)的返回值
d3.csv(...)会正常向服务器请求数据，在请求并处理好之后，将结果扔给.then(...)中的回调函数

八、一个栗子（画动态散点图）

数据要从服务器端获取，还涉及到跨域的问题。目前bug还没完全找出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用d3的data-join散点图</title>
    <!-- <script src="./data/hubeinxt.csv"></script> -->
    <script src='https://d3js.org/d3.v5.min.js'></script>
</head>
<body style="text-align: center;">
    <svg width="1650" height="920" id="mainsvg" class="svgs" style="background-color: #ffffff;"></svg>
    <script>