SVG UI에 텍스트 추가

Question

svg에 g 요소를 사용하여 UI에 텍스트를 추가했습니다. 그러나 UI에 다른 텍스트를 넣으 려합니다. 다른 텍스트를 복사하기 위해 다음 코드를 복사하여 붙여 넣는 대신에 방법이 있습니까? 라스 기반으로

 var legendData = [{ color: "white", text: "MyData" }]; 
     var legends = svg.selectAll("g legends").data(legendData); 
     var legendBox = legends.enter() 
      .append("g") 

     legendBox.append("text") 
      .attr("dx", function (d) { return 20 }) 
      .attr("dy", function (d) { return 15 }) 
      .text(function (d) { return d.text }) 
      .attr("stroke", "white") 



     // is it right way ???? 
     var legendData2 = [{ color: "white", text: "MyData2" }]; 
     var legends2 = svg.selectAll("g legends").data(legendData2); 
     var legendBox2 = legends.enter() 
      .append("g") 

     legendBox2.append("text") 
      .attr("dx", function (d) { return 20 }) 
      .attr("dy", function (d) { return 15 }) 
      .text(function (d) { return d.text }) 
      .attr("stroke", "white") 

Answer 1

합 업 코멘트 : 두 번째 요소를 원한다면

var legendData = [{ color: "white", text: "MyData", dx: 20, dy: 15 }, 
        { color: "white", text: "MyData2", dx: 20, dy: 25 }, 
        { color: "white", text: "MyData3", dx: 20, dy: 35 }]; 

    var legends = svg.selectAll("g legends").data(legendData); 
    var legendBox = legends.enter() 
     .append("g") 

    legendBox.append("text") 
     .attr("dx", function (d) { return 20 }) 
     .attr("dy", function (d) { return 15 }) 
     .text(function (d) { return d.text }) 
     .attr("stroke", "white")