title: Move a circle 100px forward on every click event
body: <p>I am learning D3.js. I wrote following code which moves the circle on click. I want to move this circle forward (+100px) from its current position on every click.</p>
  
  <p>I want to do it without CSS</p>
  
  <p>Following is my code</p>
  
  <pre><code>var svgContainer = d3.select("body").append("svg").attr("id", "root")
    .attr("width", 500)
    .attr("height", 500).append("g")
  
  
  //Draw the Circle
  var circle = svgContainer.append("circle")
    .attr("id", "Zubi")
    .attr("cx", 100)
    .attr("cy", 30)
    .attr("r", 20)
    .on("click", function() {
      d3.select(this)
        .transition()
        .duration(3000)
        .style("fill", "red")
        .attr("cx", 100)
    })
  //.attr("transform", "translate(200,200)")})
  </code></pre>