Javascript D3.js将饼图转换为频谱显示的方法

我试图为光谱显示创建一个d3模板，主要用于定性数据。想象一下这样的情景：

我得到了一个半圆：

var-margins={top:250，bottom:300，left:250，right:100}；
var高度=600；
var宽度=900；
var totalWidth=宽度+边距。左+边距。右；
var totalHeight=高度+边距。顶部+边距。底部；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，totalWidth）
.attr（“高度”，总高度）；
var graphGroup=svg.append（'g'）
.attr（'transform'，'translate（“+margins.left+”，“+margins.top+”）；
var pie=d3.pie（）
.value（函数（d）{return d}）
.sort（空）；
外部变量=（400/2）；
var innerRadius=100；
var arc=d3.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）
.startAngle（0）
.端角（数学PI）；
var arcLine=d3.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）；
/*
var pieG=graphGroup.selectAll（“.arc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
*/
var path=graphGroup.append（'path'）
.attr（“d”，弧）
.attr（“变换”，“旋转（-90）”）
.style（'stroke'，'#000'）
.style（'笔划宽度'，“2px”）
.style（“填充”、“无”）；
/*
var semicrcle=pieG.append（“路径”）
.attr（“填充”、“白色”）
.attr（“d”，d3.arc（）
.endAngle（数学PI）
.startAngle（百分比*Math.PI）
.外层（半径-10）
.内半径（半径-70）；
*/

---

您只需要一个饼图生成器

var pie = d3.pie()
    .startAngle(-Math.PI/2)
    .endAngle(Math.PI/2);

。。。根据

类别向其传递数据数组：

var data = d3.range(categories).map(()=>1);

下面是一个演示：


var高度=300；
var宽度=500；
var类别=6；
var数据=d3.范围（类别）.map（（）=>1）；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
var graphGroup=svg.append（'g'）
.attr（'transform'，“translate（250250）”）；
var pie=d3.pie（）
.startAngle（-Math.PI/2）
.端角（数学PI/2）；
外部变量=（150）；
var innerRadius=100；
var arc=d3.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）；
var path=graphGroup.selectAll（空）
.数据（pie（数据））
.输入（）
.append（'路径'）
.attr（“d”，弧）
.style（'stroke'，'#000'）
.style（'笔划宽度'，“2px”）
.style（“填充”、“无”）；
var path2=graphGroup.selectAll（空）
.数据（pie（数据））
.输入（）
.append（'路径'）
.attr（“d”，函数（d）{
返回弧内半径（150）
.外层（200）（d）
})
.style（'stroke'，'#000'）
.style（'笔划宽度'，“2px”）
.style（“填充”、“无”）