我是使用 D3 的新手，我试图通过分成 n 块来均匀地围绕另一个圆圈放置圆圈。问题是即使 coords[0] 存在，它也不会绘制第一个圆。相反，它从 coords[1] 开始并继续。这是什么原因以及如何解决？
主文件
<!doctype html>
<html>
<head>
<title>A Circle</title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.1/math.min.js"></script>
</head>
<body>
<script type="text/javascript" src="circle.js"></script>
</body>
</html>
圆.js
var w = 500;
var h = 500;
var n = 10;
var r = h/2-20;
var coords = [];
for (var i = 0; i<n; i++)
{
var p_i = {};
p_i.x = w/2+r*math.cos((2*math.pi/n)*i);
p_i.y = h/2-r*math.sin((2*math.pi/n)*i);
coords.push(p_i);
}
var svg = d3.select('body') //SVG Canvas
.append('svg')
.attr('width', w)
.attr('height', h);
var circle = svg.append('circle') //Draw Big Circle
.attr('cx', w/2)
.attr('cy', h/2)
.attr('r', r)
.attr('fill', 'teal')
.attr('stroke', 'black')
.attr('stroke-width', w/100);
var center = svg.append('circle') //Construct Center
.attr('cx', w/2)
.attr('cy', h/2)
.attr('r', r/50)
.attr('fill', 'red')
.attr('stroke', 'black')
.attr('stroke-width', w/100);
var approx_pts = svg.selectAll('circle')
.data(coords, function(d)
{
return this.id;
})
.enter()
.append('circle')
.attr('cx', function(d)
{
return d.x;
})
.attr('cy', function(d)
{
return d.y;
})
.attr('r', w/100)
.attr('fill', 'black');
执行此操作时，SVG 中已经有圆圈：
var approx_pts = svg.selectAll('circle')
因此，您的“输入”选择的元素少于您的数据数组。
解决方案：只需使用selectAll(null)：
var approx_pts = svg.selectAll(null)
这样您就可以确保您的输入选择包含数据数组中的所有元素。当然，这种方法避免了在未来创建“更新”和“退出”选择。
如果您确实打算使用“更新”和“退出”选项，则可以按类别进行选择：
var approx_pts = svg.selectAll(".myCircles")
当然，当您在输入选择中附加这些圆圈时，不要忘记设置该类。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句