Javascript 复圆图

我花了大量时间试图在SVG/D3.js中复制所附的图表。我最接近的方法是使用所附的代码。我已经探索过如何使用树函数，但只能创建一个圆带

附加代码的问题是，通过手动键入每个圆必须包含的像素坐标，很难使其看起来平滑和智能

对于信息，数据集只会给这些圆上色，所以就形状而言，它可以是完全静态的。代码只需要生成形状，然后我就可以根据数据集驱动颜色

我试图创建的图像：

这是我的代码：

D3试验
//宽度和高度
var w=1000；
var h=1000；
var数据集=[6,2,5,4,5,5,5,5,3,4,5,6]；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var circles=svg.selectAll（“圆”）
.数据（数据集）
.输入（）
.附加（“圆圈”）；
圆。属性（“cx”，函数（d，i）{
var Xaxis；
如果（i==0）{
Xaxis=“500”；
}else如果（i==1）{
Xaxis=“400”；
}else如果（i==2）{
Xaxis=“420”；
}否则如果（i==3）{
Xaxis=“452.5”；
}else如果（i==4）{
Xaxis=“485”；
}否则如果（i==5）{
Xaxis=“515”；
}否则如果（i==6）{
Xaxis=“547.5”；
}else如果（i==7）{
Xaxis=“580”；
}else如果（i==8）{
Xaxis=“600”；
}否则如果（i==9）{
Xaxis=“600”；
}否则如果（i==10）{
Xaxis=“650”；
}否则如果（i==11）{
Xaxis=“700”；
}否则如果（i==12）{
Xaxis=“750”；
}否则如果（i==13）{
Xaxis=“750”；
}否则如果（i==14）{
Xaxis=“750”；
}否则如果（i==15）{
Xaxis=“750”；
}否则如果（i==16）{
Xaxis=“750”；
}
返回Xaxis；
})
圆。属性（“cy”，函数（d，i）{
var Yaxis；
如果（i==0）{
Yaxis=“500”；
}else如果（i==1）{
Yaxis=“500”；
}else如果（i==2）{
Yaxis=“535”；
}否则如果（i==3）{
Yaxis=“560”；
}else如果（i==4）{
Yaxis=“585”；
}否则如果（i==5）{
Yaxis=“585”；
}否则如果（i==6）{
Yaxis=“560”；
}else如果（i==7）{
Yaxis=“535”；
}else如果（i==8）{
Yaxis=“500”；
}否则如果（i==9）{
Yaxis=“600”；
}否则如果（i==10）{
Yaxis=“550”；
}否则如果（i==11）{
Yaxis=“500”；
}否则如果（i==12）{
Yaxis=“450”；
}否则如果（i==13）{
Yaxis=“600”；
}否则如果（i==14）{
Yaxis=“550”；
}否则如果（i==15）{
Yaxis=“500”；
}否则如果（i==16）{
Yaxis=“450”；
}
返回Yaxis；
})
.attr（“r”，函数（d，i）{
变量大小；
如果（i==0）{
size=“30”；
}如果（i>0），则为else{
size=“20”；
}
返回大小；
})
.attr（“填充”，函数（d，i）{
颜色；
如果（d==1）{
returnColor=“绿色”；
}else如果（d==2）{
returnColor=“浅绿色”；
}否则如果（d==3）{
returnColor=“金色”；
}else如果（d==4）{
returnColor=“darkorange”；
}如果（d==5），则为else{
returnColor=“红色”；
}else如果（d==6）{
returnColor=“浅灰色”；
}
返回颜色；
});

您可以使用一些三角学来定位圆。这就是您需要的：

要在x轴上定位圆，请执行以下操作：

x-中心+（距离*sin（角度））

并将其定位在y轴上：

y-中心+（距离*cos（角度））

其中，

距离

是圆与中心的距离，

角度

是以弧度为单位的角度。要计算它，请使用：

rad = deg * Math.PI/180;

在下面的代码片段中，我将使用组绘制圆的图层，并使用每组中圆的索引计算角度。我使用

d3.range（）

设置圆圈的数量，以及设置到中心距离的同一数组中的层数。检查它：

var宽度=高度=500；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var color=d3.scaleOrdinal（d3.schemeCategory 10）
.域（d3.范围（16））；
var data1=d3.范围（16）；
VarDataRadius=[70110150190230]；
svg.append（“圆圈”）.attr（“cx”，宽度/2）
.attr（“cy”，高度/2）
.attr（“r”，20）
.attr（“填充”、“黄色”）；
var groups=svg.selectAll（“.groups”）
.数据（数据半径）
.输入（）
.附加（“g”）；
变量圆=组。选择全部（“.circles”）
.数据（数据1）
.输入（）
.附加（“圆圈”）；
圆。属性（“cx”，函数（d，i）{
var radius=此.parentNode.\uuuu数据\uuuuu；
返回宽度/2+（半径*数学sin（i*（360/（数据1.长度）*数学PI/180）））
})
.attr（“cy”，函数（d，i）{
var radius=此.parentNode.\uuuu数据\uuuuu；
返回高度/2+（半径*数学cos（i*（360/（数据1.长度）*数学PI/180）））
})
.attr（“r”，函数（）{
返回此.parentNode.\uuuuu数据\uuuuu==230？24:14
})
.attr（“填充”，函数（d，i）{
返回i==13 | | i==14？颜色（i-2）：“#ccc”
});
前奏曲
虽然这已经是一年前的事了，但我想加上我自己的两分钱，提供一种与杰拉尔多完全不同的方法。我时不时地提倡通过属性使用强大的SVG转换。无论如何，由于我无法理解的原因，这件事大部分都没有被注意到。其中一个例子就是我的to。大多数开发人员似乎更喜欢自己做三角学
<circle cx="314.67156727579004" cy="276.78784026555627"></circle>

<g transform="rotate(30)">
  <circle transform="translate(70)"></circle>
</g>