CODEWITHSUNDEEP
svgd3.js
Mars
Mars

Reputation: 8854

Placement of SVG circle that lacks center coordinates

djvanderlaan's d3.js Planetarium first defines a "sun" circle at the center of the SVG area:

svg.append("circle").attr("r", 20).attr("cx", w/2)
.attr("cy", h/2).attr("class", "sun")

and then defines two orbits around the sun (with code slightly rearranged for clarity here):

var planets = [
    { R: 300, r:  5, speed: 5, phi0: 90},
    { R: 150, r: 10, speed: 2, phi0: 190}
];

var container = svg.append("g")
  .attr("transform", "translate(" + w/2 + "," + h/2 + ")")

container.selectAll("g.planet").data(planets).enter().append("g")
  .attr("class", "planet")
  .each(function(d, i) {

     d3.select(this).append("circle").attr("class", "orbit")
          .attr("r", d.R)

     d3.select(this).append("circle").attr("r", d.r).attr("cx",d.R)
          .attr("cy", 0).attr("class", "planet");

  });

The first circle in each group--the "orbit" circle--is never given center coordinates cx and cy. That's not just in the source code; I looked at the "orbit" circles in the inspectors in three browsers, and there is no cx or cy for the orbit circles. However, these circles are centered on the center of the SVG area, i.e. on x=w/2, y=h/2. How does the browser know where to place these circles? Does it inherit cx and cy from the enclosing g element? From the "sun"?

Upvotes: 0

Views: 1114

Answers (1)

Elijah
Elijah

Reputation: 4639

Yes, all svg elements inherit the transform and scale of their parent svg:g elements. You can use this to set a local center, as done here, or to play with scale and rotate with fine precision (since setting these all with the transform attribute can sometimes lead to unexpected results).

Often, people place their circle elements inside a parent g and position the g without ever setting cx/cy because a circle defaults to centering on the center of its parent. This isn't the case with svg:rect elements, which have to be offset to "center" them.

Upvotes: 1

Related Questions