score:1

Accepted answer

here's the simplest mr s. bounce around a room i can code using d3 conventions:

<!doctype html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <script>
    var w = 250,
      h = 250,
      r = 30;

    var svg = d3.select('body')
      .append('svg')
      .attr('width', w)
      .attr('height', h)
      .style('border', '1px solid steelblue');

    var ix = math.random() * ((math.random() > 0.5) ? 5 : -5),
      iy = math.random() * ((math.random() > 0.5) ? 5 : -5),
      x = w / 2,
      y = h / 2;

    var mr_s = svg.append("g")
      .attr("id", "mr_smiley")

    mr_s.append("circle")
      .attr("r", r)
      .style("fill", "yellow")
      .style("stroke", "black");

    mr_s.append("circle")
      .attr("cx", -10)
      .attr("cy", -10)
      .attr("r", 5)
      .style("fill", "black");

    mr_s.append("circle")
      .attr("cx", 10)
      .attr("cy", -10)
      .attr("r", 5)
      .style("fill", "black");

    mr_s.append("path")
      .attr("d", "m-10 10 a 10 10 0 0 0 10 10")
      .style("fill", "black");

    mr_s.attr('transform', 'translate(' + x + ',' + y + ')');

    d3.interval(tick, 20);

    function tick() {

      x += ix;
      y += iy;

      if (x > (w - r) || x < r) {
        ix = -ix;
      }

      if (y > (h - r) || y < r) {
        iy = -iy;
      }

      mr_s.attr('transform', 'translate(' + x + ',' + y + ')');
    }
  </script>
</body>

</html>


Related Query