CODEWITHSUNDEEP
javascriptd3.js
user7383359
user7383359

Reputation:

Change the size and angle of D3 geoCircle

how can I change the size of 2 circles which are overlapping, to be for example at fixed 50px radius?

And another question is how can I rotate the yellow circle for example 30 degrees?

I create a fiddle with my current progress: 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])()));

Upvotes: 2

Views: 814

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

I see you're trying to paint the Moon. Well, I believe d3.geoCircle is the wrong tool for the task. That being said, what you're doing is a kind of hack.

Anyway, this is my 2 cents:

You can set the radii of the circles using circle.radius():

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

But don't do this, because this will mess with your "shadow" effect when positioning the yellow path. Instead, use projection.scale() to reduce the size of the Moon.

To rotate the illuminated part of the Moon you can tweak the center of the circle (not the correct way to do it but this whole code is a hack anyway!):

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

Here is your Moon (I put some stars on the background, just because):

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>

Upvotes: 3

Related Questions