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

D3 区域生成器

2022-04-21


区域生成器（Area Generator）主要作用是生成一块区域，通常区域选择器的数据访问器有六个，即”x()，x0()、x1()、y0()、y1()“，可通过使用d3.svg.area()进行创建：

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
var padding = {
    width: 800,
    height: 800
}

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

var databases = [80,120,130,70,60,90]

var areaPath = d3.svg.area()
    .x(function(d,i) {
        return 50 + i * 80
    })
    .y0(function(d,i) {
        return padding.height / 2
    })
    .y1(function(d,i) {
        return padding.height / 2 - d
    })

svg.append("path")
    .attr("d",areaPath(databases))
    .attr("stroke","#92f8c5")
    .attr("stroke-width", "3px")
    .attr("fill","#bdfedf")


通过上述的 code ，我们可以得到svg路径为：”M50,330L130,280L210,270L290,330L370,340L450,320L450,400L370,400L290,400L210,400L130,400L50,400Z“的数据，这一切归根于x、y0、y1的区域访问器，除此之外，我们依然可以使用interpolate方法，如：

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
var padding = {
    width: 800,
    height: 800
}

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

var databases = [80,120,130,70,60,90]

var areaPath = d3.svg.area()
    .x(function(d,i) {
        return 50 + i * 80
    })
    .y0(function(d,i) {
        return padding.height / 2
    })
    .y1(function(d,i) {
        return padding.height / 2 - d
    })
    .interpolate("basis")
svg.append("path")
    .attr("d",areaPath(databases))
    .attr("stroke","#92f8c5")
    .attr("stroke-width", "3px")
    .attr("fill","#bdfedf")
⬅️ Go back