D3のサイズと角度を変更するgeoCircle

Question

重複する2つの円のサイズを変更するにはどうすればよいですか？たとえば、固定の50px半径で変更するにはどうすればよいですか？

もう1つの質問は、黄色の円をどのように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>