d3將文本添加到SVG矩形

Question

我是d3.js的初學者，我想添加一些文本和矩形內部的矩形。

這裏是我的代碼：

  if (!_svg) { 
      _svg = d3.select("#col1").append("svg") 
        .attr("height", _height - 2) 
        .attr("width", _width - 2); 
     } 

     _svg.append("text").attr({ 
      id: "leftDomainName", 
      x: d3.select("svg").attr("width")/14, 
      y: d3.select("svg").attr("height")/2, 
      class: "vertical-text" 
     }).text("Business Development"); 

     var g = _svg.append("g").attr("transform", function (d, i) { 
      return "translate(0,0)"; 
     }).attr("clip-path", "url(#body-clip)"); 


     var mainBox = g.append("rect").attr({ 
      id: "mainBox", 
      x: d3.select("svg").attr("width")/8, 
      y: 3, 
      width: _width - 60, 
      height: _height/3, 
      fill: "#D7FFEC" 
     }); 

     mainBox.append("text").text("sample!!!"); 
     mainBox.append("rect").attr({ 
      x: 50, 
      y: 50, 
      width: _width - 60, 
      height: _height/3, 
      fill: "red" 
     }); 

我想添加一個文本和矩形SVG內mainBox。在鉻develper工具，我可以看到他們的加入，但也有不

頁

什麼是我錯了嗎？ 謝謝

我追加克至mainBox，然後我的元素追加到g，但它沒有工作

  var innerG = mainBox.append("g"); 

     innerG.append("text").text("sample!!!"); 
     innerG.append("rect").attr({ 
      x: 50, 
      y: 50, 
      width: _width - 60, 
      height: _height/3, 
      fill: "red" 
     }); 

Answer 1

不能添加到textrect SVG中的元素。爲了達到你想要什麼，添加包含兩個text和rect一個g元素：你的意思是mainBox內的

g.append("text").text("sample!!!"); 

代替

mainBox.append("text").text("sample!!!");