Create A Shape In D3.js By Drag And Drop Of A DOM Element

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:

Solution 1:

I resolved this issue by using

.append("svg:svg") 
 and 
.append("svg:circle")

instead of

.append("svg")
 and
.append("circle"); 

however I don't know why I should do that, for instance the following example works with the first type of selectors in jsFiddle however it didn't work when I tried locally in my browser!

Solution 2:

I have just checked your own code and it works well. The circle is displayed when I drop the bar into the container. Please see the demo: http://jsfiddle.net/af7zk/

var treeCreator = function(){};
...

Solution 3:

You need the SVG namespace defined on the web page to add SVG elements to the embedded SVG. The reason why this is not needed on jsFiddle is because they have their own SVG images used on the page with at least one defined with namespace (xmlns="http://www.w3.org/2000/svg" attribute of the SVG root element).

If you don't have that namespace defined on your SVG element in your own hosted web page the web browser cannot add elements to it as it expects them to be in the XHTML namespace. That of course doesn't know have SVG and CIRCLE tags defined in it.

UPDATE: I've added the SVG namespace attribute in the code below (xmlns attribute). But since web browsers are smart these days and can have SVG namespace already included the example might work for you locally. The real problem was omitting the link to main jQuery library on CDN since the original example won't work outside jsFiddle. So add a link

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

above two other references for jQuery resources.

And other note: for links to work in SVG you have to add XLink namespace as well (in the markup or dynamically via javascript similarly to SVG namespace). Follow SVG specifications though as xlink:href attribute will be changed to just href in SVG 2.0 when this is widely available and supported in web browsers.

http://jsfiddle.net/q1bwzhpc/7

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("xmlns", "https://www.w3.org/2000/svg")
.attr("width",200)
.attr("height",200);

var tc = new treeCreator(); 

$('#dropInSVG').droppable({
    drop: function(){
        tc.createTreeNode(theSVG); 
    }
});

  });