使用SVG在UI上添加文本

我在我的UI上添加了一個使用g元素和svg的文本。不過，我堅持在UI上放置另一個文本。有沒有辦法複製並粘貼下面的代碼來複制其他文本？使用SVG在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")

來源

2014-10-31 casillas

如果你想要第二個元素，添加第二個數據到您的數據。 – 2014-10-31 22:12:13

我已更新我的問題。這是做這件事的好方法嗎？ – casillas 2014-10-31 22:16:20

不，只需使用[[color：「white」，text：「MyData」}，{color：「white」，text：「MyData」}]'作爲數據。 – 2014-10-31 22:18:05

總結基礎上拉爾斯評論：

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

來源

2014-11-03 06:32:05

使用SVG在UI上添加文本

回答

相關問題