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>元素代替。