D3.js area.y0() 方法

在D3.js中，area.y0() 方法用于指定生成 区域图中区域的下边界。

语法

area.y0([y0])

• y0：可选参数，用于指定区域的下边界。如果省略，则返回当前的下边界生成器函数。

返回值

生成器函数，接受一个数据数组作为参数，并返回一个路径字符串，用于绘制区域图中的区域。

示例

以下代码展示了使用 area.y0() 方法创建区域图的基本过程：

// 创建画布
var svg = d3.select("body")
    .append("svg")
    .attr("width", 500)
    .attr("height", 500);

// 创建数据
var data = [
  { x: 0, y: 5 },
  { x: 1, y: 9 },
  { x: 2, y: 7 },
  { x: 3, y: 5 },
  { x: 4, y: 3 }
];

// 创建比例尺
var xScale = d3.scaleLinear()
    .domain([0, 4])
    .range([50, 450]);

var yScale = d3.scaleLinear()
    .domain([0, 10])
    .range([450, 50]);

// 创建区域生成器函数
var areaGenerator = d3.area()
    .x(function(d) { return xScale(d.x); })
    .y1(function(d) { return yScale(d.y); });

// 绘制区域图
svg.append("path")
    .datum(data)
    .attr("d", areaGenerator)
    .attr("fill", "steelblue")
    .attr("opacity", 0.5);

// 更改下边界
areaGenerator.y0(yScale(2));

// 重新绘制区域图，此时下边界为 y=2
svg.append("path")
    .datum(data)
    .attr("d", areaGenerator)
    .attr("fill", "orange")
    .attr("opacity", 0.5);

在上面的代码中，首先创建了一个数据数组和两个比例尺，然后创建一个区域生成器函数 areaGenerator，用于根据数据绘制图形。接下来，我们使用 areaGenerator 生成路径字符串绘制了一个蓝色的区域图。

然后，我们使用 yScale(2) 指定了新的下边界，将原先的 areaGenerator.y0() 的默认值覆盖。最后，在新的区域生成器函数 areaGenerator 的作用下，我们绘制了一个橙色的区域图，其中下边界为 y=2。

参考链接

• D3.js - area.y0()