D3 Circles

by klenwell

HTML

<svg width="300" height="300">
  <circle cx="80" cy="80" r="80" style="fill:red;"></circle>
  <circle cx="80" cy="80" r="40" style="fill:blue;"></circle>
</svg>

CSS

svg { border: 1px solid #ccc; }
circle { opacity: 0.5; }

JavaScript

var circle = d3.selectAll("circle");

circle.on("click", function() {
  circle.attr('cx', parseInt(circle.attr('cx')) + 10);
  circle.attr('cy', parseInt(circle.attr('cy')) + 10);
});