如何在我們的html頁面中從jquery附加svg標簽？

Question

我想附加一些svg標記，然后在svg標記內添加要從XML文件中獲取其坐標的圓和線。

我可以從jquery .append中添加相同的內容，但是盡管標簽是動態地添加到我們的DOM中的，但我無法在瀏覽器中看到任何內容，但無法在瀏覽器中看到。

這是我的代碼，用於從XML提取數據並將其附加到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;

    });

}

我找到了以下代碼，以便刷新頁面並顯示svg元素：-$（“ body”）。html（$（“ body”）。html（））;

但是在我的Java腳本文件中包含此代碼后，單擊事件不起作用。

有什么辦法可以解決這個問題。

Answer 1

看來您的問題出在html vs svg命名空間。 以下答案很好地概括了您的問題： jquery的append無法與svg元素一起使用？

我的建議是使用js庫來處理元素的創建。 Snap svg是一個很好的解決方案，應該可以解決您遇到的問題。

另外，做$('body').html($('body').html()); 是一個非常糟糕的主意。 本質上，您將擦除所有DOM元素（所有事件都綁定到它們），並使用全新的元素重建整個頁面。 這就是為什么您的所有事件都被破壞的原因。

Answer 2

得到了我問題的答案。 我已經使用D3.js將SVG元素動態附加到我的DOM中，並且現在可以正常工作。

我使用了以下代碼：

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)));