Javascript D3.js v5-根据数组长度在圆周围附加线

我想制作一个显示顺序数据（评级）的视频。共有12个等级维度，每个等级都有自己的专用线附加到一个圆上。线的极性方向表示类别（即指向1点钟=类别1、2点钟=类别2的线，以此类推）。线的长度表示额定值（短=差，长=好）。结果应该类似于雪花或太阳爆发

名称存储在字符串中。每个公司的评级存储在一个数组中。以下是我的

数据
变量的两部分：

  {'fmc':'fmc1', 'ratings':[10,10,10,10,10,10,10,10,10,10,10,10]},
  {'fmc':'fmc2', 'ratings':[8,10,10,5,10,10,10,10,10,7,10,5]},

我有公司运作的网格系统布局，但我在圆圈周围对齐线条的方式似乎有问题。相关代码：

var rotationDegree = d3.scalePoint().domain([0,12]).range([0, 2*Math.PI - Math.PI/6]);

fmcG.append('line')
    .data([10,10,10,10,10,10,10,10,10,10,10,10])
    .attr("x1", r)
    .attr("y1", r)
    .attr("x2", function(d,i) { return length(10) * Math.cos(rotationDegree(i) - Math.PI/2) + (width/2); })
    .attr("y2", function(d,i) { return length(10) * Math.sin(rotationDegree(i) - Math.PI/2) + (height/2); })
.style("stroke", function(d) { return "#003366" });

看起来我已经正确地绘制了三角图，但在实现中我被证明是错误的：这些线并没有像雪花/太阳爆发/时钟那样附加在圆的周围

片段：


var-margins={top:20，bottom:300，left:30，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+”）；
风险值数据=[
//{'fmc'：'fmc1'，'ratings'：[{'r1'：10，'r2'：10，'r3'：10，'r4'：10，'r5'：10}]}
{'fmc'：'fmc1'，'ratings'：[10,10,10,10,10,10,10,10,10]}，
{'fmc'：'fmc2'，'ratings'：[8,10,10,5,10,10,10,10,10,7,10,5]}，
{'fmc'：'fmc3'，'ratings'：[10,10,10,10,10,10,10,10,10]}，
];
var r=30；
var length=d3.scaleLinear（）.domain（[0,10]）.range（[0,50]）；
var rotationDegree=d3.scalePoint（）.domain（[0,12]）.range（[0,2*Math.PI-Math.PI/6]）；
var列=5；
var间距=220；
var-vSpacing=250；
var fmcG=graphGroup.selectAll（“.fmc”）
.数据（数据）
.输入（）
.append（'g'）
.attr（'class'，'fmc'）
.attr（'id'，（d，i）=>'fmc'+i）
.attr（'transform'，（d，k）=>{
var horSpace=（k%列）*间距；
var vertSpace=~（k/列））*vSpacing；
返回“translate”（“+horSpace+”，“+vertSpace+”）；
});
快速消费品。附加（'圆圈'）
.attr（'cx'，100）
.attr（'cy'，100）
.attr（'r'，r）
.style（'fill'，'none'）
.style（'stroke'，'003366'）；
fmcG.append（'text'）
.attr（'x'，100）
.attr（'y'，105）
.style（'text-anchor'，'middle'）
.text（函数（d）{return d.fmc}）；
快速消费品追加（'行'）
//.data（函数（d）{return d.ratings}）为什么不工作？？？？？？
.数据（[10,10,10,10,10,10,10,10,10,10,10,10,10]）
.attr（“x1”，r）
.attr（“y1”，r）
.attr（“x2”，函数（d，i）{返回长度（10）*Math.cos（旋转度（i）-Math.PI/2）+（宽度/2）；}）
.attr（“y2”，函数（d，i）{返回长度（10）*Math.sin（旋转度（i）-Math.PI/2）+（高度/2）；}）
.style（“笔划”，函数（d）{return#003366}）
主要问题是，现在，您正在追加一行。要添加尽可能多的行作为数据点，必须设置正确的enter选择：

fmcG.selectAll(null)
  .data(function(d) {
    return d.ratings
  })
  .enter()
  .append('line')
  //etc...

顺便说一句，这就是你的
数据
不起作用的原因（正如你在评论“为什么它不起作用？”）

其他问题：

点刻度需要有一个离散域，例如
d3.range（12）
不管出于什么原因，你都要把圆圈左右移动100像素。我移动了同样数量的线
以下是包含这些更改的代码段：


var页边距={
前20名，
底数：300，
左:30,，
右：100
};
var高度=600；
var宽度=900；
var totalWidth=宽度+边距.left+边距.right；
var totalHeight=高度+页边距.top+页边距.bottom；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，totalWidth）
.attr（“高度”，总高度）；
var graphGroup=svg.append（'g'）
.attr（'transform'，'translate（“+margins.left+”，“+margins.top+”）；
风险值数据=[
//{'fmc'：'fmc1'，'ratings'：[{'r1'：10，'r2'：10，'r3'：10，'r4'：10，'r5'：10}]}
{
‘fmc’：‘fmc1’，
“评级”：[10,10,10,10,10,10,10,10,10,10,10,10,10,10]
},
{
‘fmc’：‘fmc2’，
‘评级’：[8,10,10,5,10,10,10,10,10,10,7,10,5]
},
{
‘fmc’：‘fmc3’，
“评级”：[10,10,10,10,10,10,10,10,10,10,10,10,10,10]
},
];
var r=30；
var length=d3.scaleLinear（）.domain（[0,10]）.range（[0,50]）；
var rotationDegree=d3.scalePoint（）.domain（d3.range（12））.range（[0,2*Math.PI]）；
var列=5；
var间距=220；
var-vSpacing=250；
var fmcG=graphGroup.selectAll（“.fmc”）
.数据（数据）
.输入（）
.append（'g'）
.attr（'class'，'fmc'）
.attr（'id'，（d，i）=>'fmc'+i）
.attr（'transform'，（d，k）=>{
var horSpace=（k%列）*间距；
var vertSpace=~（k/列））*vSpacing；
返回“translate”（“+horSpace+”，“+vertSpace+”）；
});
快速消费品。附加（'圆圈'）
.attr（'cx'，100）
.attr（'cy'，100）
.attr（'r'，r）
.style（'填充'，'无'）
.style（'stroke'，'003366'）；
fmcG.append（'text'）
.attr（'x'，100）
.attr（'y'，105）
.style（'text-anchor'，'middle'）
.文本（功能（d）{
返回d.fmc
});
快速消费品。全选（空）
.数据（功能（d）{
返回d级
})
.输入（）
.append（'行'）
.attr（“x1”，100）
.attr（“y1”，100）
.attr（“x2”，函数（d，i）{
返回100+长度（d）*数学cos（旋转度（i））；
})
.attr（“y2”，函数（d，i）{
返回100+长度（d）*数学sin（旋转度（i））；
})
.样式（“笔划”，功能（d）{
返回“#003366”
});
主要问题是，现在，您正在追加一行。要添加尽可能多的行作为数据点，必须设置正确的enter选择：

fmcG.selectAll(null)
  .data(function(d) {
    return d.ratings
  })
  .enter()
  .append('line')
  //etc...

顺便说一句，这就是你的
数据
不起作用的原因（正如你在评论“为什么它不起作用？”）

其他问题：

点刻度需要有一个离散域，例如
d3.range（12）
无论什么原因，你都在移动圆圈