How to append svg tag from jquery in our html page?

Question

I want to append some svg tags and then inside svg tag I want to append circles and lines whose coordinates I am fetching from XML file.

I can append the same from jquery .append but I am not able to see anything in the browser although the tags are being appended in our DOM dynamically, but not able to see in the browser.

This is my code for fetching data from XML and the appending to the DOM:-

$(xml).find("Quadron").children().each(function(i){
    var valueParameter=$(this).attr("value");
    var riskParameter=$(this).attr("risk");

    $('<circle/>',{
        clicked:'plot'+i,
        technology:$(this).parent().parent().attr("YearName"),
        quadronName:$(this).parent().attr("title"),
        class:'plot',
        cx:dotsXposition,
        cy:dotsYposition,
        r:function(){
            if(valueParameter=="high"){return 10;}
            else if(valueParameter=="medium"){return 5;}
            else if(valueParameter=="low"){return 2;}
            },
        fill:function(){
            if(riskParameter=="high"){return "#b42a2d";}
            else if(riskParameter=="medium"){return "#ebd62e";}
            else if(riskParameter=="low"){return "#72aa2c";}
            }
    }).appendTo('#circlePlot');

    $('<text/>',{
        clicked:'plot'+i,
        technology:$(this).parent().parent().attr("YearName"),
        class:'plot',
        text:$(this).text(),
        x:dotsXposition+15,
        y:dotsYposition
    }).appendTo('#circlePlot');

    dotsXposition+=10;
    dotsYposition+=10;

    });

}

I found the following code so that to refresh the page and to display the svg elemnts:- $("body").html($("body").html());

But after including this code in my java script file click events doesn't work.

Is there any way to solve this.

Answer 1

It looks like your issue is with the html vs svg namespace. The following answer does a good job of summing up your issue: jquery's append not working with svg element?

My suggestion would be to use a js library to handle creating the elements. Snap svg is a great solution and should handle the issues you are having.

Also, doing $('body').html($('body').html()); is a really bad idea. Essentially, you are erasing all the DOM elements (with the all the events bound to them) and rebuilding the entire page with brand new elements. That's why all your events are getting destroyed.

Answer 2

Got the answer of my question. I have used D3.js to dynamically append the SVG elements into my DOM, and it is working fine now.

I have used the following code:

d3.select("#circlePlot").append("circle")
            .attr("clicked","plot"+i)
            .attr("technology",$(this).parent().parent().attr("YearName"))
            .attr("quadronName",$(this).parent().attr("title"))
            .attr("class","plot")
            .attr("cx",500+(r*Math.cos(angle)))
            .attr("cy",350-(r*Math.sin(angle)))
            .attr("r",function(){
                if(valueParameter=="high"){return 10;}
                else if(valueParameter=="medium"){return 6;}
                else if(valueParameter=="low"){return 3;}
                })
            .attr("fill",function(){
                if(riskParameter=="high"){return "#b42a2d";}
                else if(riskParameter=="medium"){return "#ebd62e";}
                else if(riskParameter=="low"){return "#72aa2c";}
                });

        d3.select("#circlePlot").append("text")
            .attr("clicked","plot"+i)
            .attr("technology",$(this).parent().parent().attr("YearName"))
            .attr("class","plot")
            .text($(this).text())
            .attr("x",500+(r*Math.cos(angle))+10)
            .attr("y",350-(r*Math.sin(angle)));