我花了很多时间尝试在 SVG/D3.js 中复制所附的图表。我最接近的是使用附加的代码。我已经探索过使用树函数，但只能创建一组圆圈。
所附代码的问题是，通过手动输入每个圆圈必须位于的像素坐标，很难使其看起来平滑且智能。
作为信息，数据集只会为这些圆圈着色，因此它的形状可以完全静态。代码只需要生成形状，然后我可以根据数据集驱动颜色。
我正在尝试创建的图像：
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<style type="text/css">
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 1000;
var h = 1000;
var dataset = [6, 2, 5, 4, 5, 5, 5, 5, 3, 4, 5, 6];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx", function(d, i) {
var Xaxis;
if (i === 0) {
Xaxis = "500";
} else if (i === 1) {
Xaxis = "400";
} else if (i === 2) {
Xaxis = "420";
} else if (i === 3) {
Xaxis = "452.5";
} else if (i === 4) {
Xaxis = "485";
} else if (i === 5) {
Xaxis = "515";
} else if (i === 6) {
Xaxis = "547.5";
} else if (i === 7) {
Xaxis = "580";
} else if (i === 8) {
Xaxis = "600";
} else if (i === 9) {
Xaxis = "600";
} else if (i === 10) {
Xaxis = "650";
} else if (i === 11) {
Xaxis = "700";
} else if (i === 12) {
Xaxis = "750";
} else if (i === 13) {
Xaxis = "750";
} else if (i === 14) {
Xaxis = "750";
} else if (i === 15) {
Xaxis = "750";
} else if (i === 16) {
Xaxis = "750";
}
return Xaxis;
})
circles.attr("cy", function(d, i) {
var Yaxis;
if (i === 0) {
Yaxis = "500";
} else if (i === 1) {
Yaxis = "500";
} else if (i === 2) {
Yaxis = "535";
} else if (i === 3) {
Yaxis = "560";
} else if (i === 4) {
Yaxis = "585";
} else if (i === 5) {
Yaxis = "585";
} else if (i === 6) {
Yaxis = "560";
} else if (i === 7) {
Yaxis = "535";
} else if (i === 8) {
Yaxis = "500";
} else if (i === 9) {
Yaxis = "600";
} else if (i === 10) {
Yaxis = "550";
} else if (i === 11) {
Yaxis = "500";
} else if (i === 12) {
Yaxis = "450";
} else if (i === 13) {
Yaxis = "600";
} else if (i === 14) {
Yaxis = "550";
} else if (i === 15) {
Yaxis = "500";
} else if (i === 16) {
Yaxis = "450";
}
return Yaxis;
})
.attr("r", function(d, i) {
var size;
if (i === 0) {
size = "30";
} else if (i > 0) {
size = "20";
}
return size;
})
.attr("fill", function(d, i) {
var returnColor;
if (d === 1) {
returnColor = "green";
} else if (d === 2) {
returnColor = "lightgreen";
} else if (d === 3) {
returnColor = "gold";
} else if (d === 4) {
returnColor = "darkorange";
} else if (d === 5) {
returnColor = "red";
} else if (d === 6) {
returnColor = "lightgrey";
}
return returnColor;
});
</script>
</body>
</html>
您可以使用一些三角学来定位圆。这就是您所需要的：
要将圆定位在 x 轴上：
x 中心 + (距离 * sin(角度))
并将其定位在 y 轴上：
y 中心 + (距离 * cos(角度))
Where distance是圆到中心的距离，angle是以弧度表示的角度。要计算它，请使用：
rad = deg * Math.PI/180;
在下面的代码片段中，我使用组来绘制圆圈层，并使用每组中圆圈的索引来计算角度。我正在使用设置圆圈数d3.range()以及同一阵列中设置距中心距离的层数。核实：
var width = height = 500;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var color = d3.scaleOrdinal(d3.schemeCategory10)
.domain(d3.range(16));
var data1 = d3.range(16);
var dataRadius = [70, 110, 150, 190, 230];
svg.append("circle").attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 20)
.attr("fill", "yellow");
var groups = svg.selectAll(".groups")
.data(dataRadius)
.enter()
.append("g");
var circles = groups.selectAll(".circles")
.data(data1)
.enter()
.append("circle");
circles.attr("cx", function(d, i) {
var radius = this.parentNode.__data__;
return width / 2 + (radius * Math.sin(i * (360 / (data1.length) * Math.PI / 180)))
})
.attr("cy", function(d, i) {
var radius = this.parentNode.__data__;
return height / 2 + (radius * Math.cos(i * (360 / (data1.length) * Math.PI / 180)))
})
.attr("r", function() {
return this.parentNode.__data__ == 230 ? 24 : 14
})
.attr("fill", function(d, i) {
return i == 13 || i == 14 ? color(i - 2) : "#ccc"
});
<script src="https://d3js.org/d3.v4.min.js"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
