Javascript 如何使d3路径笔划到曲线内侧？就像“的反面”；“红衣主教闭门”；插值

我正在做一个新项目，d3创建了一个显示0到10分的图表。数据如下所示：

var data = [
    {axis: 'People', value: getRandomScore()}, 
    {axis: 'Leadership', value: getRandomScore()}, 
    {axis: 'Resources', value: getRandomScore()},
    {axis: 'Processes', value: getRandomScore()},
    {axis: 'Strategy', value: getRandomScore()},
    {axis: 'Culture', value: getRandomScore()},
];

getRandomScore是一种返回0到10之间的随机整数的方法。 以下是我成功实现的结果：

这是艺术品：

---

问题是d3没有一个选项来创建路径笔划（穿过点）要在内部弯曲，使路径看起来像艺术品中的星形，我需要一些帮助来创建一个函数，该函数将在内部弯曲。

您没有指定如何绘制，因此在我的回答中，我将假设它是使用

d3.svg.line.radial

的极坐标图的变体。获得所需外观的最简单方法是在现有点之间插入“伪”点，以强制向内插值

假设您的点位于圆形极轴上（x以弧度表示）：

然后使用这些弧度的中点：

var midPoints = [Math.PI / 6, (11 * Math.PI) / 6, 
  (3 * Math.PI) / 2, (7 * Math.PI) / 6, 
  (5 * Math.PI) / 6, Math.PI / 2];    
pD = [];
midPoints.forEach(function(d,i){
  var i2 = (i === 5) ? 0 : i + 1;
  var midY = d3.min([data[i][1],data[i2][1]]) / 2; // find the min of the two neighboring points and the "inner" fake to half the min
  pD.push(data[i]);
  pD.push([d, midY]);
});

我将我的内部假点设置为两个相邻点的最小值的一半。您可以对此进行调整以获得所需的效果

以下是完整的工作代码：

.框架{
填充：无；
行程：#000；
}
.轴文本{
字体：10px无衬线；
}
.轴线，
.轴圆{
填充：无；
笔画：钢蓝；
行程数组：4；
}
.轴：圆的最后一个类型{
笔画：钢蓝；
笔划数组：无；
}
.线路{
填充：无；
笔画：橙色；
笔画宽度：3px；
}
可变宽度=500，
高度=500，
半径=数学最小值（宽度、高度）/2-30；
var r=d3.scale.linear（）
.domain（[0，2]）
.范围（[0，半径]）；
var line=d3.svg.line.radial（）
.半径（功能（d）{
返回r（d[1]）；
})
.角度（功能（d）{
return-d[0]+Math.PI/2；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var gr=svg.append（“g”）
.attr（“类”、“r轴”）
.全选（“g”）
.数据（r.记号（3）.切片（1））
.enter（）.append（“g”）；
gr.append（“圆圈”）
.attr（“r”，r）；
var ga=svg.append（“g”）
.attr（“类”、“a轴”）
.全选（“g”）
.数据（d3.范围（0,360,60））
.enter（）.append（“g”）
.attr（“转换”，函数（d）{
返回“旋转（“+-d+”）；
});
ga.append（“行”）
.attr（“x2”，半径）；
var line=d3.svg.line.radial（）
.半径（功能（d）{
返回r（d[1]）；
})
.角度（功能（d）{
return-d[0]+Math.PI/2；
})
.插入（“基数闭合”）；
风险值数据=[
[Math.PI/3，Math.random（）+1]，
[0*Math.PI，Math.random（）+1]，
[（5*Math.PI/3），Math.random（）+1]，
[（4*Math.PI/3），Math.random（）+1]，
[Math.PI，Math.random（）+1]，
[（2*Math.PI）/3，Math.random（）+1]
]
var中点=[Math.PI/6，（11*Math.PI）/6，
（3*Math.PI）/2，（7*Math.PI）/6，
（5*Math.PI）/6，Math.PI/2]；
pD=[]；
中点。forEach（函数（d，i）{
变量i2=（i==5）？0:i+1；
var midY=d3.min（[data[i][1]，data[i2][1]）/2；
pD.push（数据[i]）；
pD.推力（[d，midY]）；
});
svg.selectAll（“点”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“类”、“点”）
.attr（“转换”，函数（d）{
var coors=直线（[d]）。切片（1）。切片（0，-1）；
返回“translate（“+coors+”）
})
.attr（“r”，8）
.attr（“填充”、“钢蓝”）；
追加（“路径”）
.基准（pD）
.attr（“类”、“行”）
.attr（“d”，行）；

谢谢您的帮助，它工作得很好，也很抱歉没有为您提供代码…忘了这一点。

var midPoints = [Math.PI / 6, (11 * Math.PI) / 6, 
  (3 * Math.PI) / 2, (7 * Math.PI) / 6, 
  (5 * Math.PI) / 6, Math.PI / 2];    
pD = [];
midPoints.forEach(function(d,i){
  var i2 = (i === 5) ? 0 : i + 1;
  var midY = d3.min([data[i][1],data[i2][1]]) / 2; // find the min of the two neighboring points and the "inner" fake to half the min
  pD.push(data[i]);
  pD.push([d, midY]);
});