Javascript 圆点刻度

我知道外部d3-scale-radial.js库，但我只选择一维圆形比例（而不是像径向条形图或折线图那样的二维比例）。所以我希望我不需要为一个看起来相当简单的任务包含一个完整的附加库。以下是我使用illustrator绘制的图像版本：

你会注意到这里没有y轴。它基本上是一个点比例，但渲染为一个圆。虽然这比多维径向图简单，但精度和可伸缩性对我来说很重要，因此，我不愿意通过添加

行

s作为记号，然后变出一些三角巫术来强制它，沿着圆的周长将圆定位在精确的十进制值上——这似乎是唯一的原生d3解决方案

问题:

---

原生d3能提供什么来简化简单的径向点图？或者我应该暂时放弃使用radial.js库吗？

不，这方面没有原生的D3比例，但您不需要任何比例：简单的三角数学就可以了

对于x位置，将半径乘以值的余弦，而对于y位置，将半径乘以值的正弦。由于您的值从

0

到

1

，因此您可以使用此值定位圆（其中

r

是半径）：

但是，由于轴从顶部开始（即12点钟），因此将其减去

Math.PI/2

：

.attr("cx", function(d) {
    return r * Math.cos(d * Math.PI * 2 - Math.PI / 2)
})
.attr("cy", function(d) {
    return r * Math.sin(d * Math.PI * 2 - Math.PI / 2)
})

此外，如果您的值不再从

0

到

1

，请使用基本线性比例来映射它们

最复杂的事情是画轴，但没那么复杂

下面是一个使用

[0.1,0.25,0.7]

作为数据的演示：

const w=300，
h=300，
r=100；
常数数据=[0.1,0.25,0.7]；
const svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
常量g=svg.append（“g”）
.attr（“转换”、“转换”（+[w/2，h/2]+））；
常量axisLine=g.append（“圆”）
.attr（“r”，r）
.style（“填充”、“无”）
.风格（“笔划”、“黑色”）；
const axisGroup=g.selectAll（空）
.数据（d3.范围（0,1.05,0.05））
.输入（）
.附加（“g”）
.attr（“转换”，函数（d）{
返回“旋转（“+（-90+（d*360））+”）；
});
axisGroup.append（“行”）
.attr（“x1”，r-4）
.attr（“x2”，r+4）
.风格（“笔划”、“黑色”）；
常量点=g.selectAll（空）
.数据（数据）
.输入（）
.附加（“圆圈”）
.style（“填充”、“淡蓝色”）
.attr（“r”，8）
.attr（“cx”，功能（d）{
返回r*Math.cos（d*Math.PI*2-Math.PI/2）
})
.attr（“cy”，函数（d）{
返回r*Math.sin（d*Math.PI*2-Math.PI/2）
})

---

至于在记号上加上数字？在本例中，我们有20个记号（0到1，步数为.05）。如果你有时间的话，看看你是如何处理的，那就太好了。

.attr("cx", function(d) {
    return r * Math.cos(d * Math.PI * 2 - Math.PI / 2)
})
.attr("cy", function(d) {
    return r * Math.sin(d * Math.PI * 2 - Math.PI / 2)
})