title: Why does D3.js transition function gets broken when I try to use it second time?
body: <p>I am trying to fade and move an html div to a svg circle element, while same svg circle element fades in to view. Why do I face following problems ?</p>
  
  <p><em>The problems I face are :</em></p>
  
  <ul>
  <li>svg circle elements does not fade in </li>
  <li>when I try to use transition second time for div element it does not work</li>
  <li>Even, cancelling transition by <code>d3.select(textbox).transition()</code> does not work</li>
  </ul>
  
  <p><em>My current setup is :</em></p>
  
  <ul>
  <li>Chrome Version 51.0.2704.36 beta-m (64-bit)</li>
  <li>src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"</li>
  <li>src="https://d3js.org/d3.v3.min.js"</li>
  </ul>
  
  <p><em>My code is :</em></p>
  
  <pre><code>c=d3.select(document.body).append("svg")
  .append("circle")
  
  c
  .attr("r","20")
  .attr("cx","50")
  .attr("cy","50")
  .attr("fill","red")
  .attr("stroke","black")
  .attr("opacity","0")
  .transition()
  .duration(200)
  .attr("opacity","1");
  
  
  
  d3.select(testbox)
  .transition()
  .style("left",c.attr("cx"))
  .style("top",c.attr("cy"))
  .style("opacity","0")
  .duration(200);
  </code></pre>