Javascript 如何在D3.js中定位雷达图上交点处的圆/点

我正在做雷达图。我已经附加了一些圆圈，我正试图定位在十字路口。然而，圆圈的

cx和cy

属性似乎有问题，我无法理解

在此方面的任何帮助都将不胜感激

var数据集=[{
“天”：1，
“销售”：40
}, {
“天”：2，
“销售”：85
}, {
“天”：3，
“销售”：70
}, {
“天”：4，
“销售”：30
}, {
“天”：5，
“销售”：85
}, {
“天”：6，
“销售”：60
}, {
“天”：7，
“销售”：85
}, {
“天”：8，
“销售”：35
}, {
“天”：9，
“销售”：70
}, {
“天”：10，
“销售”：15
}];
var w=460，
h=460；
var保证金={
顶部：20，底部：10，左侧：10，右侧：10
};
变量宽度=w-margin.left-margin.right；
var高度=h-margin.top-margin.bottom；
var circleConstraint=d3.min（[高度，宽度]）；
变量半径=d3.scale.linear（）
.domain（[01100]）
.范围（[0，（circleConstraint/2）]）；
var centerXPos=width/2+margin.left；
var centerYPos=高度/2+margin.top；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.附加（“g”）
.attr（“转换”、“转换”（+centerXPos+）、“+centerYPos+”）；
//添加圆形网格线和标签
var网格线=[0,20,40,60,80,100]；
var circleAxes=svg.selectAll（“.circularGrid”）
.数据（网格线）
.enter（）.append（“g”）
.attr（“类”、“循环型”）；
圆圈。附加（“圆圈”）
.attr（“r”，函数（d）{
返回半径（d）；
})
.style（“笔划”，“#CCC”）
.样式（“填充”、“无”）；
circleAxes.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“dy”，函数（d）{
返回半径（-d-1）；
})
.文本（字符串）
.style（“字体大小”，“10磅”）
.style（“字体系列”、“无衬线”）；
//附加salesLine的路径
var销售额=[]；
dataset.forEach（函数（d）{
销售.推送（d.销售）；
});
svg.selectAll（“.salesLine”）
.数据（[销售]）
.enter（）.append（“路径”）
.attr（“类”、“销售线”）
.style（“填充”、“无”）
.style（“笔划”，“#000”）
.attr（“d”，d3.svg.line.radial（）
.半径（功能（d）{
返回半径（d）；
})
.角度（功能（d，i）{
返回值（i/dataset.length）*2*Math.PI；
}));
//在交点处附加圆
svg.selectAll（“.datapoints”）
.data（数据集）。输入（）
.附加（“圆圈”）
.attr（“类”、“数据点”）
.attr（“r”，3）
.style（“填充”、“#4393c3”）
.attr（“cx”，功能（d）{
返回半径（d.day）；
})
.attr（“cy”，函数（d）{
返回半径（d.sales）；
});
我建议您绘制数据点，如标记：

演示：

顺便说一下，多行
.attr（）
行：

.attr("class", "datapoints")
.attr("r", 3)

可以像单个关联数组那样编写：

.attr({"class": "datapoints", "r": 3})

要修复代码，您应该实现一点三角函数：

// Appending circles at intersections
svg.selectAll(".datapoints")           // it doubles line [*]
  .data(dataset).enter()
  .append("svg:circle")                // full notation for the node
  .classed({"datapoints": true})       // [*] selection.classed() method for classes,
                                       // but you can omit this line because you wrote .selectAll(".datapoints") above
  .attr({"r": 10, "fill": "#4393c3"})  // you must make big dots 
                                       // to be clickable for people
  .attr("cx", function(d, i) {
        var alpha = (2 * Math.PI / dataset.length) * i;
        return( radius(d.sales) * Math.cos(alpha - Math.PI / 2) ); // just as in trigonometry book
  })
  .attr("cy", function(d, i) {
        var alpha = (2 * Math.PI / dataset.length) * i;
        return( radius(d.sales) * Math.sin(alpha - Math.PI / 2) );
  })
  .on("click", function(d){
        alert("$" + d.sales);
  })                                // now you can click on it to see the sales value
  .on("mouseover", function(d){     // little kiss of animation
    d3.select(this).attr("r", "14");
  })
  .on("mouseout", function(d){
    d3.select(this).attr("r", "10");
  });

演示：

演示（动画）：
对不起，你能稍微澄清一下这个问题吗？你是想把点放在直线和圆的交点上吗？@nick-为这一混乱道歉。我只是想把点放在直线/路径上，类似于一个与直线相连的散点图。忘掉灰色的圆圈吧，那些只是网格线。非常感谢鲁宾，这也可以。我只是想知道你是否知道一种使用
cx和cy
属性重新定位点的方法，就像我在代码中所做的那样？这在折线图上很简单，但我无法在雷达图上重新定位它们，因为我猜它的极坐标。我向你推荐，你知道，一切都从数学开始。我将研究这些。干杯