📌 相关文章
- D3.js lineRadial() 方法(1)
- D3.js lineRadial() 方法
- D3.js lineRadial.defined() 方法(1)
- D3.js lineRadial.defined() 方法
- D3.js lineRadial.context() 方法(1)
- D3.js lineRadial.context() 方法
- D3.js lineRadial.angle() 方法(1)
- D3.js lineRadial.angle() 方法
- D3.js lineRadial.curve() 方法
- D3.js lineRadial.curve() 方法(1)
- RADIUS-示例(1)
- RADIUS-示例
- D3.js 对()方法
- D3.js 对()方法(1)
- RADIUS-操作
- RADIUS-操作(1)
- D3.js-图
- D3.js-图(1)
- Radius教程(1)
- Radius教程
- D3.jsribbon.radius()函数
- D3.jsribbon.radius()函数(1)
- RADIUS-功能(1)
- RADIUS-功能
- RADIUS-概述(1)
- RADIUS-概述
- RADIUS 协议(1)
- RADIUS 协议
- D3.js 索引()方法(1)
📜 D3.js lineRadial.radius() 方法(1)
📅 最后修改于: 2023-12-03 14:40:34.333000 🧑 作者: Mango
D3.js lineRadial.radius() 方法
简介
D3.js(lineRadial)库的radius()方法返回指定的线径值，即来自原点的半径。该方法用于生成极坐标的径向线。该方法可与lineRadial.angle()方法一起使用，以指定用于绘制线条的角度和半径。
语法
lineRadial.radius([accessor])
参数
- accessor:用于访问单个数据元素的函数，以设置半径值。默认为
(d) => d[1]，即使用数据元素的第二个值作为半径值。
返回值
radius()方法返回线径访问器函数。当使用line()方法生成路径时，该函数将被用作y访问器。
示例
案例 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3.js lineRadial.radius() 方法</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg width="400" height="400"></svg>
<script>
const data = [
[0, 30],
[60, 50],
[120, 40],
[180, 60],
[240, 70],
[300, 50],
[360, 30]
];
const svg = d3.select("svg");
const center = { x: 200, y: 200 };
const radius = 150;
const lineGenerator = d3.lineRadial()
.angle(d => d[0] * Math.PI / 180)
.radius(d => d[1])
.curve(d3.curveLinearClosed);
const pathData = lineGenerator(data);
svg.append("path")
.attr("d", pathData)
.attr("fill", "#61C1E6")
.attr("transform", `translate(${center.x}, ${center.y})`);
</script>
</body>
</html>
运行结果：
案例 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3.js lineRadial.radius() 方法</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg width="400" height="400"></svg>
<script>
const data = [
{ angle: 0, radius: 30 },
{ angle: 60, radius: 50 },
{ angle: 120, radius: 40 },
{ angle: 180, radius: 60 },
{ angle: 240, radius: 70 },
{ angle: 300, radius: 50 },
{ angle: 360, radius: 30 }
];
const svg = d3.select("svg");
const center = { x: 200, y: 200 };
const radius = 150;
const lineGenerator = d3.lineRadial()
.angle(d => d.angle * Math.PI / 180)
.radius(d => d.radius)
.curve(d3.curveLinearClosed);
const pathData = lineGenerator(data);
svg.append("path")
.attr("d", pathData)
.attr("fill", "#61C1E6")
.attr("transform", `translate(${center.x}, ${center.y})`);
</script>
</body>
</html>
运行结果：
总结
D3.js(lineRadial)库的radius()方法返回指定的线径值，即来自原点的半径。该方法用于生成极坐标的径向线。使用该方法时，可以自定义访问器函数，以控制半径值的计算方式。该方法通常与lineRadial.angle()方法一起使用，以指定用于绘制线条的角度和半径。