Ändern Sie die Größe und Winkel von D3 geoCircle

Question

Wie kann ich die Größe von 2 Kreisen, die sich überlappen, um zum Beispiel bei festen 50px Radius zu ändern?

Und eine andere Frage ist, wie kann ich den gelben Kreis zum Beispiel 30 Grad drehen?

ich eine Geige mit meinem aktuellen Fortschritt: 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

Ich sehe Sie versuchen, den Mond zu malen. Nun, ich glaube, d3.geoCircle ist das falsche Werkzeug für die Aufgabe. Davon abgesehen ist das, was du machst, eine Art Hack.

Wie auch immer, dies ist meine 2 Cent:

Sie die Radien der Kreise setzen können mit circle.radius():

Wenn Radius angegeben wird, setzt den Kreisradius auf den angegebenen Winkel in Grad, und gibt diesen Kreisgenerator zurück.

Aber tun Sie das nicht, denn das wird Ihren "Schatten" -Effekt stören, wenn Sie den gelben Pfad positionieren. Verwenden Sie stattdessen projection.scale(), um die Größe des Mondes zu reduzieren.

Um den beleuchteten Teil des Mondes drehen Sie die center des Kreises optimieren können (nicht der richtige Weg, es aber diese ganze Code ist ein Hack auf jeden Fall zu tun!):

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

Hier ist Ihr Mond (ich habe ein paar Sterne auf dem Hintergrund, nur weil):

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>