title: create a shape in d3.js by drag and drop of a DOM element
body: <p>I am trying to create a simple shape, let's say a circle, in d3.js using drag and drop of a DOM element, let's say a div. So here is what I did: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;d3 tree with drag and drop&lt;/title&gt;
    &lt;style type="text/css"&gt;
     #dropInSVG {
       width:200px;
       height:200px; 
       margin-left:20px;
       background-color:#F8F8F8 ;
    }
  
  #dropInSVG svg {
      width: 200px;
      height:200px;
      background-color:yellow;
   } 
  
  #tobeDropped{
  width:50px; 
  height:15px;
  background-color:pink;
  float:left; 
  }
  
  #mainContainer {
  width: 250px;
  height: 250px;
  background-color:orange;
  cursor:pointer;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="mainContainer"&gt;
  &lt;div id="dropInSVG"&gt;&lt;/div&gt;
  &lt;div id="tobeDropped"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript" src="./lib/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./lib/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./lib/d3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./lib/d3.layout.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="d3appDrag.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript code:</p>
  
  <pre><code>  var treeCreator = function(){}; 
  
  
    treeCreator.prototype.callbacktest = function(svgContainer){
    alert('the element has been dropped');
    }; 
  
    treeCreator.prototype.createTreeNode = function(theSVG){
    $('#tobeDropped').remove();
    theSVG.append("circle")
      .style("stroke","green")
      .style("fill","white")
      .attr("r",40)
      .attr("cx", 100)
      .attr("cy", 100)
      .on("mouseover", function () {
          d3.select(this).style("fill", "aliceblue");
      })
          .on("mouseout", function () {
          d3.select(this).style("fill", "red");
      }); 
   }; 
  
   $(document).ready(function(){
  
      $('#tobeDropped').draggable({containment:'#mainContainer'});
  
  var theSVG = d3.select('#dropInSVG')
  .append("svg")
  .attr("width",200)
  .attr("height",200);
  
  var tc = new treeCreator(); 
  
  $('#dropInSVG').droppable({
      drop: function(){
          tc.createTreeNode(theSVG); 
      }
  });
  
    });
  </code></pre>
  
  <p>The problem is that the circle is not showing up. Could you please see what's wrong?</p>
  
  <p>Thanks 
  Mohamed Ali</p>