SVGのテキスト要素にテキストを追加することはできますか？

Question

私は、その特定のテキストをクリックしてデータラベルの最後に新しいテキスト要素を追加しようとしています。出来ますか？私は自分のコードにこれを追加しようとしました、それが追加されるテキスト表示されません。

circleGroup.selectAll("text") 
      .data(data) 
      .enter() 
      .append("text") 
      .text(function (d) { 
       if (d.label) { 
        return d.label; 
       } 
        return ""; 
       }) 
      .attr("x", function (d) { 
        return x(d.time) + 6; 
      }) 
      .attr("y", function (d) { 
        return y(d.plotY) + 4; 
       }) 
      .attr("font-size", "10px") 
      .attr("fill", "#2d3d45") 
      .on("click", function(d) { 
        d3.select(this).append("text").text("[A]").attr("x", function(d) {return x(d.time) + 25;}).attr("y", function(d) { return y(d.plotY) + 4;}); 

      }); 

をしかし、それはデータ・ラベルに追加されました。

はなぜ「[A]」のテキストも、親のテキスト要素に追加された後に表示さ取得されていませんか？

Answer 1

短い答え：できません<text>要素を別の<text>要素に追加します。

SVG specs、

によれば、テキストコンテンツの子要素は、別のテキストコンテンツ要素の子孫として許容されるテキストコンテンツ要素です。 SVG 1.1では、テキストコンテンツの子要素は、 'altGlyph'、 'textPath'、 'tref'、 'tspan'です。

したがって、解決策ではなく<tspan>追加されます。

var svg = d3.select("svg"); 
 
svg.append("text") 
 
    .attr("x", 20) 
 
    .attr("y", 20) 
 
    .text("I am the text element") 
 
    .append("tspan") 
 
    .attr("dy", "1.5em") 
 
    .attr("x", 20) 
 
    .text("And I am the tspan element")

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>

あなたにこの構造を与える：

<text x="20" y="20">I am the text element 
    <tspan dy="1.5em" x="20">And I am the tspan element</tspan> 
</text>