javascript之在 d3 或 javascript 中的 svg 圆区域内生成随机点

无情阅读：205 2025-06-02 22:19:02 评论：0

我有一个 svg 圆元素，坐标属性如下:

<circle id="c1" class="area" cx="440" cy="415" r="75"></circle>

我想使用 javascript 或 d3 在圆元素内生成一些随机点。我考虑了正确的申请方法。我得出的结论是，我可以通过两种方式做到这一点:

通过仅生成 n 个随机点坐标 cx,cy 然后检查每个点是否在 svg 圆内，如果从它到中心的距离最多为圆元素的半径。
<
通过生成点的半径 R * sqrt(random()) 和 theta 作为 random() * 2 * PI 并计算 cx ,cy 作为 r * cos(theta) 和 r * sin(theta)。

有没有更好的方法？

请您参考如下方法:

我正在使用@Joseph O'Rourke 的想法来绘制 1500 点。或者，您可以创建一个圈子并重复使用它。

此外，如果您不需要使用这些点，您可以考虑使用 svg 模式

const SVG_NS = "http://www.w3.org/2000/svg"; 
let R = 50; 
let c = { x: 50, y: 50 }; 
 
let g = document.createElementNS(SVG_NS, "g"); 
 
for (let i = 0; i < 1500; i++) { 
  let a = Math.random() * 2 * Math.PI;// angle 
  let r = Math.sqrt(~~(Math.random() * R * R));// distance fron the center of the main circle 
  // x and y coordinates of the particle 
  let x = c.x + r * Math.cos(a); 
  let y = c.y + r * Math.sin(a); 
  // draw a particle (circle) and append it to the previously created g element. 
  drawCircle({ cx: x, cy: y, r: 1 }, g); 
} 
 
function drawCircle(o, parent) { 
  var circle = document.createElementNS(SVG_NS, "circle"); 
  for (var name in o) { 
    if (o.hasOwnProperty(name)) { 
      circle.setAttributeNS(null, name, o[name]); 
    } 
  } 
  parent.appendChild(circle); 
  return circle; 
} 
//append the g element to the svg 
svg.appendChild(g);

svg { 
  border: 1px solid;  
  max-width: 90vh; 
}

<svg id="svg" viewBox="0 0 100 100"></svg>

标签:JavaScript

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。