Question

我有一个通过d3创建的折线图。对于每个数据点（svg circle元素），我使用d3＆amp; amp追加一个兄弟元素。 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，甚至更好，在我追加节点时让它更新？

Answer 1

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

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

您的代码中存在的问题是您使用的是createElement。由于这是一个SVG，您必须使用createElementNS，其中：

使用指定的命名空间URI 和限定名称创建一个元素。（强调我的）

SVG的有效命名空间URI为：http://www.w3.org/2000/svg

因此，它应该是：

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

这是一个只有这个改变的简单演示：

d3.selectAll('circle').each(
  function() {
    var thisCircle = $(this);
    var myText = document.createElementNS("http://www.w3.org/2000/svg", 'text')
    $(myText).attr("x", 10)
    $(myText).attr("y", 70);
    $(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);
  }
)

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<svg>
  <circle cx="50" cy="50" r="10" fill="teal"></circle>
  <circle cx="150" cy="50" r="10" fill="teal"></circle>
  <circle cx="250" cy="50" r="10" fill="teal"></circle>
</svg>

SVG不显示通过d3和＆amp;添加的元素。 jQuery的

1 个答案: