SVGはd3＆jquery経由で追加された要素を表示しません

Question

私はd3で作成された折れ線グラフを持っています。各データポイント（svg circle要素）に対して、d3 & jqueryを使用して兄弟要素を追加しています。要素は正しく作成され、追加されますが、表示されません。 Chrome Devツールで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"）にのみ答えます。 2次質問（"SVGを再描画または更新する方法はありますか？"）MCVEという新しい質問を投稿することをお勧めします。

言われていること、のは、何が起こっているのか見てみましょう：あなたはcreateElementを使用していることを

あなたのコードに問題があります。

が指定された名前空間URIおよび修飾名を持つ要素を作成します。これはSVGであるので、あなたはcreateElementNSを、使用する必要があります。 （強調鉱山）

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>