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

D3 对角线生成器

2022-04-21


对角线生成器（Diagonal enerator），主要使用三次贝赛尔曲线将两个点进行连接，通过使用d3.svg.diagonal()创建，共有两个访问器一个函数，分别为：“source()、target()、projection()”

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
/* 设置基本 svg 格式 */
var padding = {
    width: 800,
    height: 800
}

var svg = d3.select('body')
    .append("svg")
    .attr("width", padding.width)
    .attr("height", padding.height)

/* 对角线坐标 */
var databases = {
    source: {
        x: 2, y: 0
    },
    target: {
        x: 300, y: 900
    }
}

/* 定义对角线生成器 */
var diagonal = d3.svg.diagonal()

svg.append("path")
    .attr("d",diagonal(databases))
    .attr("fill","none")
    .attr("stroke","#51d576")
    .attr("stroke-width",4)

projection


projection() 主要是将坐标进行转换，通常target坐标会首先调用该投影进行转换，之后生成新的路径：

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
/* 设置基本 svg 格式 */
var padding = {
    width: 800,
    height: 1800
}

var svg = d3.select('body')
    .append("svg")
    .attr("width", padding.width)
    .attr("height", padding.height)

/* 对角线坐标 */
var databases = {
    source: {
        x: 2, y: 0
    },
    target: {
        x: 300, y: 900
    }
}

/* 定义对角线生成器 */
var diagonal = d3.svg.diagonal()
    .projection(function(d) {
        var x = d.x * 2
        var y = d.y * 2
        return [x,y]
    })
svg.append("path")
    .attr("d",diagonal(databases))
    .attr("fill","none")
    .attr("stroke","#51d576")
    .attr("stroke-width",4)

通过使用：

1
2
3
4
5
6
var diagonal = d3.svg.diagonal()
    .projection(function(d) {
        var x = d.x * 2
        var y = d.y * 2
        return [x,y]
    })

那么最终的target路径将会在原有的大小下将会被放大成2倍。

⬅️ Go back