title: Align text element to middle in treemap
body: <p>How I can set a text-align of <code>text</code> element to the center of SVG <code>g</code> element (parent box)?</p>
  
  <p>like <code>text-align: center</code> on html div element.</p>
  
  <p>I try to build treemap by D3.js </p>
  
  <p><a href="https://jsfiddle.net/armanfeyzi/w8snog2e/3/" rel="nofollow noreferrer">JSFiddle Demo</a></p>
  
  <p>Here is a code that I try :</p>
  
  <pre><code>leaf.append("text")
              .attr("fill", "#fff")
              //.style("text-anchor", "end")
              .attr("width", d =&gt; d.x1 - d.x0)
              .attr("height", d =&gt; d.y1 - d.y0)
              // .attr("y", 0)
              // .attr("x", 0)
              // .attr("dy", 0)
              .attr("font-size", d =&gt; Math.min(d.x1 - d.x0, d.y1 - d.y0) / 6)
              .selectAll("tspan")
              .data(d =&gt; d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.data.volume)).concat(format(d.data.pc)))
              .enter().append("tspan")
              // .style("width", d =&gt; d.x1 - d.x0)
              // .style("height", d =&gt; d.y1 - d.y0)
               //.style("text-anchor", "middle")
              .attr("dy", "1.1em")
              .attr("x", "5")
              .attr("font-weight", (d, i, nodes) =&gt; i === nodes.length - 1 ? "200" : "700")
              .attr("font-size", (d) =&gt; d.value)
              .text(d =&gt; d);
  </code></pre>
  
  <p>Please view the sample code on JSFiddle</p>