使用SVG在UI上添加文本

Question

I have added a text on my UI using g element with svg. However, I am stuck to put another text on UI. Is there a way instead of copy and paste the following code to duplicate another text?

        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

sum up based on Lars comments:

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")