梦入琼楼寒有月，行过石树冻无烟

D3 路径生成器（lines）

2022-04-21

D3 的路径生成器在拥有指定坐标的情况下可以生成路径，可以通过使用d3.line()来进行创建一个线生成器。

在 d3 version 3 版本中， 创建路径生成器需要使用 d3.svg.line() 来进行创建，在 v4 中将此变得更加语义化

d3.line()


首先我们使用d3.line()来创建一个默认的线(line)生成器，之后定义一个坐标数组并通过pathData调用lineGenerator传入数组points，之后添加路径（path）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var svg = d3.select('#demo')
    .append("svg")
    .attr("width",700)
    .attr("height",700)

/*
    * d3.line()
    *   使用默认的配置创建一个 线（line）生成器
    * points
    *   定义一个坐标数组
 */
var lineGenerator = d3.line()
var points = [
    [1, 1],
    [100, 100],
    [200, 30],
    [300, 50],
    [400, 40],
    [500, 80]
]

/*
    *   pathData
    * ->    通过pathData 调用 lineGenerator来传入数组（points）
    *   svg
    *       选择 svg 元素，添加路径（path），为其绑定数据（pathData）与样式
 */
var pathData = lineGenerator(points)
d3.select('svg')
    .append("path")
    .attr('d',pathData)
    .attr("fill","none")
    .attr("stroke","red")

Scale

当然，纯粹的默认路径生成器是满足不了我们的需求的，因为他的路径是根据数据来决定的，因此我们需要来使用一个线性比例尺。

线性比例尺（scaleLinear）是一个适用与连续定义数据的比例尺，他很好的保留了比例的差异。每一个 range（y） 中的值都可以被表示为一个函数，其中 domain 对应了 x内的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var svg = d3.select('#demo')
    .append("svg")
    .attr("width",700)
    .attr("height",700)

/*
    分别创建一个 xScale 与 yScale 比例尺
 */
var xScale = d3.scaleLinear()
    .domain([0,6])
    .range([0,600])
var yScale = d3.scaleLinear()
    .domain([0,80])
    .range([150,0])

/*
    定义访问器
 */
var lineGenerator = d3.line()
    .x(function (d,i) {
        return xScale(i)
    })
    .y(function (d) {
        return yScale(d.value)
    })
/*
    * d3.line()
    *   使用默认的配置创建一个 线（line）生成器
    * points
    *   定义一个坐标数组
 */
var points = [
    {value: 10},
    {value: 50},
    {value: 10},
    {value: 1}
]



/*
    *   pathData
    * ->    通过pathData 调用 lineGenerator来传入数组（points）
    *   svg
    *       选择 svg 元素，添加路径（path），为其绑定数据（pathData）与样式
 */
var pathData = lineGenerator(points)
svg.append("g")
d3.select('g')
    .append("path")
    .attr('d',pathData)
    .attr("fill","none")
    .attr("stroke","red")

curve


在 D3 version 4 中新加了一种参数为curve，curve可以在一系列点之间进行差值，最终形成一条连续的线，下述我们使用了d3.curceCardinalcardinal 三次曲线。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var svg = d3.select('#demo')
    .append("svg")
    .attr("width",700)
    .attr("height",700)

svg.append('path')
    .attr("fill","none")
    .attr("stroke","#999")

/*
    * 定义访问器
    *   curve
    *       三次cardinal曲线
 */
var lineGenerator = d3.line()
    .x(function (d,i) {
        return xScale(i)
    })
    .y(function (d) {
        return yScale(d.value)
    })
    .curve(d3.curveCardinal)
/*
    分别创建一个 xScale 与 yScale 比例尺
 */
var xScale = d3.scaleLinear()
    .domain([0,6])
    .range([0,600])
var yScale = d3.scaleLinear()
    .domain([0,80])
    .range([150,0])

/*
    * d3.line()
    *   使用默认的配置创建一个 线（line）生成器
    * points
    *   定义一个坐标数组
 */
var points = [
    {value: 10},
    {value: 50},
    {value: 10},
    {value: 1}
]


/*
    *   pathData
    * ->    通过pathData 调用 lineGenerator来传入数组（points）
    *   svg
    *       选择 svg 元素，添加路径（path），为其绑定数据（pathData）与样式
 */
var pathData = lineGenerator(points)

d3.select('path')
    .attr('d', pathData)
⬅️ Go back