score:0

Accepted answer

Your refactor is better but this line

.attr("transform", "translate(q, r), scale(4)")

Should be written as:

.attr("transform", "translate(" + q + "," + r + "), scale(4)")

Here's the whole code cleaned up a bit more:

<!DOCTYPE html>
<html lang="en" class="tas-com">

<head>
  <meta charset="utf-8">
  <title>Simple Stars</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>

</head>

<body>

  <h1>Some Stars</h1>

  <svg width="200" height="200" style='background: aliceblue'>

  </svg>

  <script type="text/javascript">
    var svg;

    function draw(q, r) {

      var x = 100 + 60 * Math.cos(q),
        y = 100 + 60 * Math.sin(q)

      svg.append("circle")
        .attr("cx", x)
        .attr("cy", y)
        .attr("r", 5)
        .style("fill", "red");

      svg.append("polygon")
        .attr("points", "0,0.9511, 1.0,0.95111, 1.309,0, 1.618,0.9511, 2.618,0.9511, 1.809,1.5388, 2.118,2.4899, 1.309,1.9021, 0.5,2.4899, 0.809,1.5388")
        .attr("fill", "blue")
        .attr("transform", "translate(" + (x - 5) + "," + (y - 5) + "), scale(4)")
        .style("fill", "yellow");
    }

    svg = d3.select("svg");

    svg.append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 200)
      .attr("height", 200)
      .style("fill", "blue");

    for (var i = 0; i < 150; i += 15) {
      var o = 30
      draw(o + i, o + i)
    }
  </script>

</body>

</html>


Related Query

More Query from same tag