2026-03-13

Codes►前端

01 d3

D3 基础

2 前言

D3：Data-Driven Documents
数据驱动文档

3 HTML

超文本标记语言超文本标记语言
HTML不是编程语言,HTML用来描述我们常见的网页
DOM -> Document Object Model

4 JavaScript

解释型的编程语言 不需要编译

4.1 把函数作为参数

一个变量可以是一个函数
- const myFunction = function(a, b) { return a + b; }
- 类似于C/C++的函数指针
回调（CallBack）：
- JavaScript脚本中（尤其D3.js编程中）常见把函数作为变量输入
- 用于实现异步编程
- setTimeout( function () { console.log(‘hello world!’) }, 1000);

4.2 d3开发中常用js函数

数组排序 a.sort()

1
2
3

a.sort(function(a,b){ 
     return new Date(b.date) - new Date(a.date)
})

数组查询
1
a.find( d => d.name === ‘WenYang’)

5 SVG可缩放矢量模型

可缩放矢量图形（英語：Scalable Vector Graphics，SVG）
其他图片通过像素点秒回图像，svg通过描述图中的所有形状，实现缩放不失真的功能

//01svg.html
<svg style='display: block; margin: 0 auto;'>
        <g transform='translate(0,60)'>
            <rect width=100 height=100 fill='#EEEEEE' />
            <circle r=15 fill='#72bf67' cx=25 cy=30 />
            <circle r=15 fill='rgb(100, 149, 237)' cx=75 cy=30 />
            <g transform='translate(15,60) rotate(10)'>
                <path d="M0,0 A40,40 10 0,0 65,0" fill='none' stroke='gray' stroke-width=5 />
            </g>
        </g>
</svg>

6 D3操作svg

单选d3.select(…)
- 只找一个，若有重名也只返回第一个
- 多为ID
多选d3.selectAll(…)
- 有多少返回多少
赋值element.attr(‘y’, ‘100’)
- 多用链式调用selection.attr(…).attr(…).attr(…)
添加element.append(…)
- 链式：d3.select(‘#mainsvg’).append(‘g’).attr(‘id’, ‘maingroup’)
删除element.remove()

//D3操作svg
const svg = d3.select('svg');
const circle = d3.selectAll('circle')
circle.attr('r','20').attr('fill','#aaaaff')
d3.select('#gid').append('g').attr('id','gid-1')
d3.select('#gid-1').remove()

7 D3常用操作

最大值d3.max(array)
最小值d3.min(array)
最大最小值d3.extent(array)
- 同时返回最小值与最大值，以数组的形式，即[最小值，最大值]
- 数组中的内容可以是任意对象d3.extent(a, d => d.height)
文件读取 d3.csv
- d3.csv(‘path/to/data.csv’).then( data => { console.log(data)} )
- d3.csv被调用后，其返回值是一个JavaScript的‘Promise’对象(object)
- Promise‘询问’：数据读取好了之后要做什么？‘做什么’即对应.then()中函数的内容。

Hexo