D3.js - 获取弧内的随机点

Question

如何尝试在现有弧内获得随机坐标？

我目前正在根据用户数据渲染饼图，并希望在随机位置的每条弧上渲染一些点——它们可能在弧外，但是

目前，我使用的是与每个圆弧的质心的随机偏差（在一定范围内）。 这种方法是有问题的，因为弧可能太小并且点最终在弧之外。

目前我真的无法提供任何示例代码，因为到目前为止我实际上只是在渲染一个包含五个切片的饼图。

Answer 1

我使用 这个例子作为起点。 我所做的是为每个圆弧生成 10 乘以 2 的数字：距中心的距离和角度（以弧度表示）。 然后我使用这些值绘制了圆圈。

为了证明它有效，我将半径设为常数，所以你会看到一圈黑点。 如果你愿意，你也可以使用注释掉的行来随机化。

请注意圆圈与圆弧的颜色如何相同。

我还必须减去Math.PI / 2 ，因为度数和弧度之间的零点不同：

• 0 度是到顶部的垂直线；
• 0 弧度是向右的水平线。 -Math.PI / 2弧度是一条到顶部的垂直线。

 const data = [{ "region": "North", "count": "53245" }, { "region": "South", "count": "28479" }, { "region": "East", "count": "19697" }, { "region": "West", "count": "24037" }, { "region": "Central", "count": "40245" } ]; const width = 360; const height = 360; const radius = Math.min(width, height) / 2; const svg = d3.select("#chart-area").append("svg").attr("width", width).attr("height", height).append("g").attr("transform", `translate(${width / 2}, ${height / 2})`); const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854", "#ffd92f" ]); const pie = d3.pie().value(d => d.count).sort(null); const arc = d3.arc().innerRadius(0).outerRadius(radius); // Join new data const path = svg.selectAll("path").data(pie(data)); // Enter new arcs path.enter().append("path").attr("fill", (d, i) => color(i)).attr("d", arc).attr("stroke", "white").attr("stroke-width", "6px").each(drawPoints); function drawPoints(d, i) { // Generate random numbers (x, y) where x between startAngle // and endAngle // and y between 0 and radius const points = new Array(10).fill(undefined).map(() => ({ angle: d.startAngle + Math.random() * (d.endAngle - d.startAngle) - Math.PI / 2, //radius: Math.random() * radius, radius: radius / 2, })); svg.selectAll(`.point-${i}`).data(points).enter().append('circle').attr('class', `point point-${i}`).attr("fill", (d) => color(i)).attr('stroke', 'black').attr('stroke-width', '2px').attr('cx', (d) => d.radius * Math.cos(d.angle)).attr('cy', (d) => d.radius * Math.sin(d.angle)).attr('r', 3) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script> <div id="chart-area"></div>