title: Placing labels at the center of nodes in d3.js
body: <p>I am starting with d3.js, and am trying to create a row of nodes each of which contains a centered number label.</p>
  
  <p>I am able to produce the desired result visually, but the way I did it is hardly optimal as it involves hard-coding the x-y coordinates for each text element. Below is the code:</p>
  
  <pre><code>var svg_w = 800;
  var svg_h = 400;
  var svg = d3.select("body")
      .append("svg")
      .attr("width", svg_w)
      .attr("weight", svg_h);
  
  var dataset = [];
  for (var i = 0; i &lt; 6; i++) {
      var datum = 10 + Math.round(Math.random() * 20);
      dataset.push(datum);
  }
  
  var nodes = svg.append("g")
                 .attr("class", "nodes")
                 .selectAll("circle")
                 .data(dataset)
                 .enter()
                 .append("circle")
                 .attr("class", "node")
                 .attr("cx", function(d, i) {
                     return (i * 70) + 50;
                 })
                 .attr("cy", svg_h / 2)
                 .attr("r", 20);
  
  var labels = svg.append("g")
                  .attr("class", "labels")
                  .selectAll("text")
                  .data(dataset)
                  .enter()
                  .append("text")
                  .attr("dx", function(d, i) {
                      return (i * 70) + 42
                  })
                  .attr("dy", svg_h / 2 + 5)
                  .text(function(d) {
                      return d;
                  });
  </code></pre>
  
  <p>The <code>node</code> class is custom CSS class I've defined separately for the <code>circle</code> elements, whereas classes <code>nodes</code> and <code>labels</code> are not explicitly defined and they are borrowed from this <a href="https://stackoverflow.com/questions/11102795/d3-node-labeling/11109803#11109803">answer</a>.</p>
  
  <p>As seen, the positioning of each text label is hard-coded so that it appears at the center of the each node. Obviously, this is not the right solution.</p>
  
  <p>My question is that how should I correctly associate each text label with each node circle dynamically so that if the positioning of a label changes along with that of a circle automatically. Conceptual explanation is extremely welcome with code example.</p>