如何在我们的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)));