D3圈子包-向節點添加標簽

Question

雖然我已經問過幾次這個問題，但是在執行時遇到了一些麻煩。 我希望做的是有label每個圓圈的中心屬性（如提到這里 ）。 我相信我會將text屬性添加到：

canvas.selectAll('circles')
    .data(nodes)
    .enter()
    .append('svg:circle')
    .attr('cx', function (d) {
        return d.x;
    })
    .attr('cy', function (d) {
        return d.y;
    })
    .attr('r', function (d) {
        return d.r;
    })
    .attr('fill', function (d) {
        return d.color;
    });

但是，對於為什么我在與之鏈接的上一個示例中給出的說明不適用於當前的設置，我感到困惑。 我認為可能是pack選項讓我失望（大約兩者之間的差異），但是任何其他示例都將有很大幫助。 謝謝！

更新

感謝您的回答/建議，我用自己的進度更新了Codepen （因為我需要兩行數據；應該澄清），這似乎運行良好。 現在將其包裝成一個圓圈-歸根結底，我希望將其包裝在實際的#canvas寬度/高度（這是一個矩形）中。 我看到了這個樹形圖示例-這就是我要去的地方嗎？

我到目前為止的演示

Answer 1

可能的困惑是，您不能在圓選擇中添加標簽（因為在SVG中， circle元素不能包含text元素）。 您需要制作一個既包含圓圈又包含文本的g元素，或者單獨選擇文本，例如：

canvas.selectAll('text')
    .data(nodes)
    .enter()
    .append('svg:text')
    .attr('x', function (d) {
        return d.x;
    })
    .attr('y', function (d) {
        return d.y;
    })
    // sets the horizontal alignment to the middle
    .attr('text-anchor', "middle")
    // sets the vertical alignment to the middle of the line
    .attr('dy', '0.35em')
    .text(function(d) { 
      return d.label;
    });

請參閱更新的演示： http : //codepen.io/anon/pen/djebv