javascript - 更改D3 geoCircle的大小和 Angular

Question

如何更改两个重叠的圆圈的大小，例如固定为 50px 半径？

另一个问题是如何旋转黄色圆圈，例如 30 度？

我用当前进度创建了一个 fiddle :jsFiddle

var svg = d3.select("svg"),
    circle = d3.geoCircle()
    projection = d3.geoOrthographic()

    path = d3.geoPath()
      .projection(projection)

    moonBackground = svg.append("path")
      .attr("fill", "#2b281b")
      .attr("d", path(circle())),

    moon = svg.append("path")
      .attr("fill", "yellow")
      .attr("d", path(circle.center([140, 0])()));

Answer 1

我看到你正在尝试画月亮。嗯，我相信 d3.geoCircle 是执行该任务的错误工具。话虽这么说，你所做的只是一种黑客行为。

无论如何，这是我的 2 美分:

您可以使用 circle.radius() 设置圆的半径:

If radius is specified, sets the circle radius to the specified angle in degrees, and returns this circle generator.

但不要这样做，因为这会扰乱定位黄色路径时的“阴影”效果。相反，使用 projection.scale()缩小月球的大小。

要旋转月球的发光部分，您可以调整 center圆的(这不是正确的方法，但无论如何这整个代码都是一个黑客!):

.attr("d", path(circle.center([140, -30])()));

这是你的月亮(我在背景上放了一些星星，只是因为):

var svg = d3.select("svg"),
  circle = d3.geoCircle(),
  projection = d3.geoOrthographic().translate([150, 150]).scale(100);

path = d3.geoPath()
  .projection(projection),

  circles = svg.selectAll(null)
  .data(d3.range(100))
  .enter()
  .append("circle")
  .attr("r", 1)
  .attr("fill", "white")
  .attr("cx", () => Math.random() * 300)
  .attr("cy", () => Math.random() * 300),

  moonBackground = svg.append("path")
  .attr("fill", "#2f2c1f")
  .attr("d", path(circle())),

  moon = svg.append("path")
  .attr("fill", "yellow")
  .attr("d", path(circle.center([140, -30])()));

svg {
  background-color: black;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="300" height="300"></svg>