javascript - 改变D3 geoCircle的大小和 Angular

Question

如何更改重叠的 2 个圆圈的大小，例如固定 50 像素半径？

另一个问题是如何将黄色圆圈旋转 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 是完成这项任务的错误工具。也就是说，您正在做的是一种 hack。

无论如何，这是我的 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>