Question

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

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

我用我当前的进步创造了一个小提琴：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()设置圆圈的半径：

如果指定了半径，则将圆半径设置为指定的角度（以度为单位），并返回此圆形生成器。

但是不要这样做，因为在定位黄色路径时会影响你的“阴影”效果。相反，使用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("foo")
    .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", "#1b180b")
    .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>

更改D3 geoCircle的大小和角度

1 个答案: