D3.js 如何计算径向线内各个点的x和y坐标？

创建

lineRadial

时，如何获取直线各个点的

x

和

y

坐标

lineGenerator.angle（）

返回每个点的角度

lineGenerator.radius（）

返回每个点的半径

let width=700；
设高度=500；
让svg=d3。选择（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
设g=svg.append（'g'）
.attr（'transform'，'translate（${width/2}，${height/2}）`）；
设randomY=d3.randomNormal（0,4）；
设data=d3.range（20）.map（（el，i）=>{return{x:i，y:randomY（）}；}）；
设r=200；
让startAngle=-90*（Math.PI/180）；//将deg转换为rad
设endAngle=90*（Math.PI/180）；//将deg转换为rad
设x=d3.scaleLinear（）
.domain（[0,20]）
.范围（[startAngle，endAngle]）；
设y=d3.scaleLinear（）
.domain（[0,4]）
.范围（[r-10，r]）；
设line=d3.lineRadial（）
.角度（（d）=>{返回x（d.x）；}）
.半径（（d）=>{返回y（d.y）；}）；
g、 追加（'路径'）
.数据（[数据]）
.attr（'类'，'行'）
.attr（'填充'，'无'）
.attr（'笔划'，'蓝色'）
.attr（'d'，行）；
g、 选择全部（'点'）
.数据（数据）
.enter（）.append（'圆'）
.attr（'填充'，'无'）
.attr（'笔划'，'黑色'）
.attr（'cx'，line.angle（））
.attr（'cy'，line.radius（））
.attr（'r'，2）

一点三角法


let width=700；
设高度=500；
让svg=d3。选择（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
设g=svg.append（'g'）
.attr（'transform'，'translate（${width/2}，${height/2}）`）；
设randomY=d3.randomNormal（0,4）；
设data=d3.range（20）.map（（el，i）=>{return{x:i，y:randomY（）}；}）；
设r=200；
让startAngle=-90*（Math.PI/180）；//将deg转换为rad
设endAngle=90*（Math.PI/180）；//将deg转换为rad
设x=d3.scaleLinear（）
.domain（[0,20]）
.范围（[startAngle，endAngle]）；
设y=d3.scaleLinear（）
.domain（[0,4]）
.范围（[r-10，r]）；
设line=d3.lineRadial（）
//在计算角度和半径时隐藏它们
//角度必须旋转。。。
.angle（（d）=>{d.a=x（d.x）-Math.PI/2；返回x（d.x）；}）
.半径（（d）=>{d.r=y（d.y）；返回y（d.y）；}）；
g、 追加（'路径'）
.数据（[数据]）
.attr（'类'，'行'）
.attr（'填充'，'无'）
.attr（'笔划'，'蓝色'）
.attr（'d'，行）；
g、 选择全部（'点'）
.数据（数据）
.enter（）.append（'圆'）
.attr（'填充'，'无'）
.attr（'笔划'，'黑色'）
.attr（'transform'，函数（d）{
//转换为笛卡尔坐标
设p={
x:（d.r*数学cos（d.a）），
y:（d.r*数学·辛（d.a））
};
返回“translate”（“+p.x+”、“+p.y+”）”；
})
.attr（'r'，2）
使用正则表达式解析
路径的
d
属性：
/（M | L）（[\-.0-9]+），（[\-.0-9]+）/