我正在制作带有两个圆圈的 d3 视觉效果，其中较小的圆圈放置在较大圆圈的半径边缘。其代码笔位于此处 https://codepen.io/ajblack/pen/KqKpde 。我有一个 200 像素的方形 SVG，将这些圆圈放入其中，然后有两个值 uAssets 和 uAssetsCom 来指定圆圈的大小。我使用以下代码创建一个比率以确保较大的圆适合 200 像素的正方形:
var ratioToFit = (200/uAssets)/2;
然后我使用余弦计算大圆的外半径与 SVG 容器的外边界之间 45 度 Angular 的距离:
var key = 100*((1-Math.cos(45*Math.PI/180))/Math.cos(45*Math.PI/180))
为了放置较小的圆，我将 cx 和 cy 属性计算为内圆的半径加上此“键”。
d3.select("#uAssetComCircle")
.attr("cx", function(d){return (d.radius+key);})
.attr("cy", function(d){return (d.radius+key);})
这会将内圆放置在靠近大圆半径的位置，但大约相差 2 个像素。我可以通过在 cx 和 cy 上添加硬编码的 2 像素来抵消这一点，但我觉得我不应该这样做。
我的数学有问题吗？
最佳答案
不确定我完全遵循您的计算，但这里有一个快速重构，介绍了一些内容:
- 所有绘图均以 SVG 中心点为基础的转换
- 处理从用户坐标到像素坐标的计算的 d3 比例。
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<script>
var uAssets = 17;
var uAssetsCom = 3;
var svgContainer = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200)
.attr('id', 'circleContainer')
.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")")
var scale = d3.scaleLinear()
.domain([0,uAssets])
.range([0,100]);
var jsonCircles = [{
"radius": uAssets,
"color": "green",
"id": "uAssetCircle"
}, {
"radius": uAssetsCom,
"color": "purple",
"id": "uAssetComCircle"
}];
var circles = svgContainer.selectAll("circle")
.data(jsonCircles)
.enter()
.append("circle");
var circleAttributes = circles
.attr("r", function(d) {
return scale(d.radius);
})
.attr("id", function(d) {
return d.id
})
.style("fill", function(d) {
return d.color;
});
d3.select("#uAssetComCircle")
.attr("cx", function(d) {
return scale(uAssets) * Math.cos(45 * (Math.PI / 180));
})
.attr("cy", function(d) {
return scale(uAssets) * Math.sin(45 * (Math.PI / 180));
})
</script>
</body>
</html>关于javascript - D3 小圆位于大圆半径边缘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44334123/