Javascript SVG不显示通过d3&；添加的元素；jquery

我有一个通过d3创建的折线图。对于每个数据点（svg圆圈元素），我将使用d3和jquery添加一个同级元素。元素确实被正确创建和添加，但是它们没有出现。如果我在Chrome开发工具中编辑HTML块，文本元素确实会突然出现——就好像需要先刷新SVG对象才能显示我添加的元素一样

以下是我用来插入文本元素的代码：

        chart.selectAll('circle.dot').each(
            function(){
                var thisCircle = $(this);
                var myText = document.createElement('text')
                $(myText).attr("x", +800)
                $(myText).attr("y", +200);
                $(myText).attr("fill", "red");
                $(myText).attr("font-family", "verdana");
                $(myText).text("testing");
                $(myText).attr("style", "font-weight:bold;z-index:100");

                this.parentNode.insertBefore(myText, this.nextSibling);
            }
        )

---

有没有办法在添加节点时重新绘制或刷新svg，或者更好地使其更新？

这种D3和jQuery的混合不仅是不必要的，而且还可以使事情无声地失败。除此之外，还有一种惯用的D3方法来完成您在这里所做的事情。因此，我建议您重构所有这些代码。但是，请记住，这里我只回答您的主要问题（“SVG不显示元素”），不多不少。对于您的第二个问题（“有没有办法重新绘制或刷新SVG？”），我建议您发布一个新问题，并附上一个

话虽如此，让我们看看发生了什么：

代码中的问题是您正在使用

createElement

。由于这是一个SVG，您必须使用：

使用指定的命名空间URI和限定名创建元素。（强调矿山）

SVG的有效命名空间URI为：

http://www.w3.org/2000/svg

因此，它应该是：

var myText = document.createElementNS("http://www.w3.org/2000/svg", "text")

下面是一个仅包含该更改的简单演示：

d3.选择全部（'circle'）。每个(
函数（）{
var thisCircle=$（本）；
var myText=document.createElements（“http://www.w3.org/2000/svg“，‘文本’）
$（myText）.attr（“x”，10）
$（myText）.attr（“y”，70）；
$（myText）.attr（“填充”、“红色”）；
$（myText）.attr（“字体系列”、“verdana”）；
$（myText）.text（“测试”）；
$（myText）.attr（“样式”，“字体大小：粗体；z索引：100”）；
this.parentNode.insertBefore（myText，this.nextSibling）；
}
)