SVG不显示通过d3和jquery添加的元素

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

下面是我用插入我的文字元素的代码：

 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，甚至更好，使其更新，因为我追加的节点？

来源

2017-08-09 DShultz

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>

来源

2017-08-09 23:05:43

SVG不显示通过d3和jquery添加的元素

回答

相关问题