title: Text and Rectangle not align
body: <p>The following is the code of rectangle with text within. </p>
  
  <p><a href="https://i.stack.imgur.com/kCZqC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kCZqC.png" alt="enter image description here"></a></p>
  
  <p>The problem is that it can't seem to align. How to make them align more easily?</p>
  
  <p>Here's the code I use:</p>
  
  <p>I know I can adjust the <code>x</code> and <code>y</code> for rectangle and text, but a more organized way to make them align is probably to have one <code>g</code> for each rectangle and related text, and adjust their positions within the <code>g</code>? How to achieve that?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"&gt;&lt;/script&gt;
  &lt;!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"&gt;&lt;/script--&gt;
  &lt;style&gt;
      rect {
          stroke: #9A8B7A;
          stroke-width: 1px;
          fill: #CF7D1C;
          opacity:
      }
  &lt;/style&gt;
  &lt;body&gt;&lt;/body&gt;
  &lt;script&gt;
      var dataset = [[1,3,3,5,6,7],[3,5,8,3,2,6],[9,0,6,3,6,3],[3,4,4,5,6,8],[3,4,5,2,1,8]];
  
      var svg = d3.select("body")
              .append("svg")
              .attr("width", 500)
              .attr("height", 500);
      var local = d3.local();
  
  
      svg.append("g")
              .selectAll("g")
              .data(dataset)
              .enter()
              .append("g")
              .selectAll("text")
              .data(function(d, i) {
  
                  local.set(this, i)
                  return d;
              })
              .enter()
              .append("text")
              .text(function(d, i, j) {
                  return d;
              })
              .attr("x", function(d, i, j) {
                  return (i * 20) + 40;
              })
              .attr("y", function(d) {
                  return (local.get(this) * 20) + 40;
              })
              .attr("font-family", "sans-serif")
              .attr("font-size", "20px");
  
  
  
  
      svg.append("g")
              .selectAll("g")
              .data(dataset)//use top-level data to join g
              .enter()
              .append("g")
              .selectAll("rect")
              .data(function(d, i) {//for each &lt;g&gt;, use the second-level data (return d) to join rect
                  console.log(this);
                  local.set(this, i);//this is the &lt;g&gt; parent
                  return d;
              })
              .enter()
              .append("rect")
  
              .attr("x", function(d, i, j) {
                  return (i * 20) + 40;
  
              })
              .attr("y", function(d) {
                  return (local.get(this) * 20) + 40;
              })
              .attr("width",20)
              .attr("height",20)
              .attr("fill-opacity",0.1)
  
  
  
  
  &lt;/script&gt;
  </code></pre>