Генерация случайных точек в пределах SVG круга в d3 или JavaScript

Question

У меня есть элемент круга svg с атрибутом координаты, как показано ниже:

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

Я хотел бы создать несколько случайных точек в элементе круга, используя javascript или d3. Я думал о правильном подходе к применению. И я прихожу к выводу, что могу сделать это двумя способами:

• сгенерируйте только n случайных координат точек cx, cy, а затем проверьте, находится ли каждая точка в пределах круга svg, если расстояние от нее до центра не превышает радиус радиуса элемента круга.

• путем создания радиуса точки как R * sqrt(random()) и тета как random() * 2 * PI и вычисления cx, cy как r * cos(theta) и r * sin(theta).

Есть ли лучший подход?

Answer 1

Я использую идею Джозефа О'Рурка, чтобы нарисовать 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>

Answer 2

Ваш второй метод не дает равномерного распределения внутри круга. Смотрите левое изображение ниже.

Этот процесс идет под именем " выбор диска ." Смотрите эту статью, чтобы получить правильное изображение ниже <ч />
Изображение с Mathworld.

<ч />