Генерация случайных точек в области круга svg в d3 или javascript
У меня есть элемент круга 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).
Есть ли лучший подход?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ваш второй метод не дает равномерного распределения внутри круга. См. Левое изображение ниже.
Этот процесс называется «сборщик дисков». См. Эту статью, чтобы получить правильное изображение ниже
Image from Mathworld.
Я использую идею @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>Оба ответа были отличными. но у этого есть также практический пример сценария применения. Спасибо!
зависит от типа дистрибутива, который вы хотите