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添加的元素

回答

相關問題