Размещение меток в центре узлов в d3.js

Я начинаю с d3.js и пытаюсь создать ряд узлов, каждый из которых содержит числовую метку по центру.

Я могу получить желаемый результат визуально, но способ, которым я это сделал, едва ли оптимален, так как требует жесткого -кодирования координат x -y для каждого текстового элемента. Ниже приведен код:

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

Класс node— это пользовательский класс CSS, который я определил отдельно для элементов circle, тогда как классы nodesи labelsне определены явно и они заимствованы из этого ответа .

Как видно, положение каждой текстовой метки жестко -закодировано, так что она появляется в центре каждого узла. Очевидно, что это не правильное решение.

Мой вопрос заключается в том, как мне правильно связать каждую текстовую метку с каждым кругом узла динамически, чтобы, если позиционирование метки автоматически менялось вместе с положением круга. Концептуальное объяснение очень приветствуется с примером кода.