d3 SVG rect에 텍스트 추가

Question

d3.js에서 초보자이고 일부 텍스트를 추가하고 rect 내부를 rect로 추가하려고합니다. 나는 텍스트와 RECT의 SVG 내부 mainBox를 추가 할

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

:

여기 내 코드입니다. 크롬 develper 도구에서 나는 자신이 추가되었습니다 볼 수 있지만

내 잘못 무엇 페이지

에 존재하지 않습니다? 내가 mainBox에 g을 추가하고 해당 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

당신은 rect에 text를 추가 할 수 없습니다 작동하지 않았다 SVG의 요소.

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

대신

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