D3js根据圆半径放置文本并将其链接到圆

Question

我需要创建以上图表。

我正在使用D3JS版本v3，用于创建圆，我正在使用包布局。

我根据参数值绘制了不同颜色的圆圈。

我需要根据圆的半径将文本放置在圆的内部或外部，还需要绘制一个链接以从圆中指向这些文本。

    minRadius = d3.min(data, function(d) {
    return d[RadiusBy];
});
maxRadius = d3.max(data, function(d) {
    return d[RadiusBy];
});

scale = d3.scale.linear().domain([minRadius, maxRadius]).range([20, 500]);
packLayoutData = {
    name: '',
    children: data,
};

packLayout = d3.layout.pack().size([((width) - 10), ((height) - 10)]).padding(2).value(function(d) {
    return scale(d[RadiusBy]);
});

svgContainer = d3.select(container).append('svg').attr('version', '1.1').attr("viewBox", "0 0 1000 700");

$(container).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');
$(container).find('svg').attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');

var node = svgContainer.data([packLayoutData]).selectAll('g.node').data(packLayout.nodes).enter().append('g').attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
});

node.append('circle').attr('r', function(d) {
    return d.r || 0;
})

node.filter(function(d) {
    return !d.children;
}).append('text').attr('fill', '#333333').attr('text-anchor', 'middle').attr('font-size', '1vw').attr('font-family', 'Arial').text(function(d) {
    return (d[(labels[0]) || ''] || '');
})

如何绘制文本以及行路径？ 我根据标签长度和圆半径过滤了节点

node.filter(function (d) {
    if (!d.children) {
      return ((d[(labels[0]) || ''] || '').length) < (d.r / 6);
    }
    return !d.children;
  })

根据上述代码，如果文本适合圆半径，则将文本放置在圆内。

如何在svg viewbox区域内的圆外绘制文本并绘制​​一条连接它的直线路径？