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>