javascript - 用 d3/svg 画一个锯齿形的圆

Question

我想在 d3 中创建一个绘制锯齿形圆的圆。这不是一个很好的解释，所以我在绘图应用程序中画了这张照片。

如果我能控制曲折的大小/数量就太好了(应该比我在这张图片中画的多，可能是 50 - 100 而不是 15 - 20)。

在此先感谢您!

Answer 1

对于该任务，我会使用 d3.lineRadial ，其中:

Constructs a new radial line generator with the default settings. A radial line generator is equivalent to the standard Cartesian line generator, except the x and y accessors are replaced with angle and radius accessors

这就是生成器的样子(对于下面演示中使用的数据结构，由数组组成):

const generator = d3.lineRadial()
    .angle(d => d[0])
    .radius(d => d[1])

鉴于演示数据可以更简单，只需:

const generator = d3.lineRadial();

这是一个演示:

const svg = d3.select("svg")
  .append("g")
  .attr("transform", "translate(100,50)");
const data = d3.range(51).map(d => [(Math.PI * 2) / (50 / d), d % 2 ? 40 : 50]);
const generator = d3.lineRadial()
const path = svg.append("path")
  .attr("d", d3.lineRadial()(data))

path {
  fill: none;
  stroke: black;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

在此演示中，锯齿形的数量和圆的大小由数据控制。例如，更少的曲折和更大的内外半径之间的距离:

const svg = d3.select("svg")
  .append("g")
  .attr("transform", "translate(100,70)");
const data = d3.range(27).map(d => [(Math.PI * 2) / (26 / d), d % 2 ? 30 : 70]);
const generator = d3.lineRadial()
const path = svg.append("path")
  .attr("d", d3.lineRadial()(data))

path {
  fill: none;
  stroke: black;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

PS:这不会创建 <circle>元素，它显然永远不会有锯齿形，而是一个 <path>元素代替。