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

D3 弧生成器

2022-04-21


弧生成器（Arc Generator）可以通过innerRadius（内半径访问器）、outerRadius（外半径访问器）、startAngle（起始角度）、endAngle（终止角度访问器）四类访问器来绘制圆弧以及饼状图和弦图等图表。

innerRadius and outerRadius

一弧

在下述 code 中，startAngle or startAngle即代表圆弧的度数，通常的情况下0°需要使用0代替，同样180°也需要通过3.1415926来进行代替。需要注意的是，他是按照顺时针方向来进行填充或增加的，其中outerRadius与innerRadius分别表示圆弧半径以及内弧半径：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var padding = {
    width: 1800,
    height: 500
}

var svg = d3.select('body')
    .append("svg")
    .attr("width",padding.width)
    .attr("height",padding.height)
var databases = {
    startAngle: 9,
    endAngle: Math.PI * 1.10    /* 提供基本的数学功能和常数在内的对象 */
}

var archPath = d3.svg.arc()
    .innerRadius(200)
    .outerRadius(100)

svg.append("path")
    .attr("d", archPath(databases))
    .attr("transform","translate(255,255)")
    .attr("stroke","#026836")
    .attr("stroke-width","10px")
    .attr("fill","#22a547")

多弧


在 D3 中，多弧主要用于绘制诸如饼状图等学术图表，通过使用多弧并将其startAngle与endAngle形成首位呼应之势，最终他们的度数共为360°即可：

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
/* svg 创建与大小 */
var padding = {
    width: 800,
    height: 800,
}

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

/* 饼图数据 */
var databases = [
    { startAngle: 0, endAngle: Math.PI * 0.6 },
    { startAngle: Math.PI * 0.6, endAngle: Math.PI },
    { startAngle: Math.PI, endAngle: Math.PI * 1.7 },
    { startAngle: Math.PI * 1.7, endAngle: Math.PI * 2}
]

/* innner and outer 与 code */
var archPath = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(200)

var color = d3.scale.category20b()

/* 圆位置与基本样式 */
svg.selectAll("path")
    .data(databases)
    .enter()
    .append("path")
    .attr("d", function(d) {
        return archPath(d)
    })
    .attr("transform", "translate(255,255)")
    .attr("stroke", "black")
    .attr("stroke-width", "1px")
    .attr("fill", function(d,i) {
        return color(i)
    })

/* 文字样式与位置 */
svg.selectAll("text")
    .data(databases)
    .enter()
    .append("text")
    .attr("transform", function(d) {
        return "translate(255,255)" +
            "translate(" + archPath.centroid(d) + ")"
    })
    .attr("text-anchor", "middle")
    .attr("fill","white")
    .attr("font-size","10px")
    .text(function(d) {
        return Math.floor((d.endAngle - d.startAngle) * 180 / Math.PI) + "°"
    })
⬅️ Go back