title: Appending multiple svg text with d3
body: <p>I have been stuck on this problem for days.</p>
  
  <p>So I have a dataset of objects of the following form:</p>
  
  <pre><code>dataset = [{metric:"revenue",value:0.03},{metric:"sales", value:0.15},{metric:"churn", value: 0.06},{metric:"logins", value: 0.45}]
  </code></pre>
  
  <p>The following code would display the 4 metric names in a grid pattern (meshy, meshx are the coordinates points of the grid and meshsize is the size of the grid, so this is just putting the text in the middle of a grid square): </p>
  
  <pre><code>svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function(d){
          return d.metric;
      })
      .attr("y",function(d,i){
          return meshy[i] + meshsize/2;
      })
      .attr("x", function(d,i){
          return meshx[i] + meshsize/2;
      })
      .attr("font-size",25)
      .attr("font-family","serif")
      .attr("text-anchor","middle")
      .attr("font-weight","bold");
  </code></pre>
  
  <p>Now I would like to put the value of the metric right underneath the metric name like so:</p>
  
  <pre><code> svg.append("text")
      .data(dataset)
      .text(function(d){
          return (d.value);
      })
      .attr("y",function(d,i){
          return meshy[i] + meshsize/2 + 20;
      })
      .attr("x", function(d,i){
          return meshx[i] + meshsize/2 ;
      })
      .attr("font-size",25)
      .attr("font-family","serif")
      .attr("text-anchor","middle")
      .attr("font-weight","bold");
  </code></pre>
  
  <p>But this only returns the value underneath the metric name for the FIRST metric, the other 3 value texts are not even in the DOM. I have tried multiple approaches including replacing .text with .html as described here:<a href="https://github.com/mbostock/d3/wiki/Selections#wiki-html">https://github.com/mbostock/d3/wiki/Selections#wiki-html</a> with no success. I have also tried appending paragraph elements instead - this works but the p elements are positioned below the svg body in a list with no obvious way to move them into the right position. The code above is the closest I have come to getting what I need, but for some reason only the first value text shows up. However, I am open to any approach in d3 that gets the job done: 4 metric names with the values right underneath them</p>