如何向d3.js力气泡图添加标签

我试图修改这个代码bl.ocks.org/mbostock/7881887，这样我就可以使用这个技术来显示一个单词云，其中圆圈的大小与文件中的单词数有关，但我目前的主要问题是如何首先找到向圆圈添加文本的方法。诱人的是，我可以在代码中看到这样一个函数。。。node.append（“文本”）？所以我假设我可以在nodes函数的“d”中添加一个“name”值，然后我们就可以开始了。如您所见，我刚刚在d中添加了name:text，其中text=“Test”。 如果您能在这些圆圈内或附近找到任何文字，我们将不胜感激！我是新的D3，你可能知道，我花了很多晚上在谷歌上搜索，什么也没找到。我可以在不同类型的图表上看到示例。。。原力布局，例如，但它们看起来如此不同，我无法将一个应用于另一个：-(

这是我的名片

var-width=960，
高度=500，
padding=1.5，//相同颜色节点之间的间隔
clusterPadding=6，//不同颜色节点之间的分隔
最大半径=12；
var n=100，//节点总数
m=5；//不同簇的数目
var color=d3.scale.category10（）
.域（d3.范围（m））；
//每个群集的最大节点。
var集群=新阵列（m）；
var节点=d3.range（n）.map（函数（）{
test=“test”；
var i=数学地板（数学随机（）*m），
r=Math.sqrt（（i+1）/m*-Math.log（Math.random（））*maxRadius，
d={
名称：test，
集群：我，
半径：r，
名称：“测试”，
x:Math.cos（i/m*2*Math.PI）*200+width/2+Math.random（），
y:Math.sin（i/m*2*Math.PI）*200+高度/2+数学随机（）
};
如果（！clusters[i]|（r>clusters[i].radius））clusters[i]=d；
console.log（d.name）；
返回d；
});
var-force=d3.layout.force（）
.节点（节点）
.尺寸（[宽度、高度]）
重力（.02）
.收费（0）
.on（“滴答”，滴答）
.start（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var node=svg.selectAll（“圆”）
.数据（节点）
.enter（）.append（“圆”）
.style（“fill”，函数（d）{返回颜色（d.cluster）；}）
.呼叫（强制拖动）；
node.append（“文本”）
.text（函数（d）{返回d.name；}）
//.style（“字体大小”，函数（d）{return Math.min（2*d.r，（2*d.r-8）/this.getComputedTextLength（）*24）+“px”}）
//.attr（“dy”，“.35em”）；
.attr（“dx”，10）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.name}）
.风格（“笔画”、“灰色”）；
node.transition（）
.持续时间（750）
.delay（函数（d，i）{返回i*5；}）
.attrTween（“r”，函数（d）{
var i=d3.插值（0，d.半径）；
返回函数（t）{returnd.radius=i（t）；}；
});
功能勾号（e）{
节点
.每个（集群（10*e.alpha*e.alpha））
.每个（碰撞（.5））
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
//将d移动到与群集节点相邻的位置。
功能簇（alpha）{
返回函数（d）{
var cluster=簇[d.cluster]；
if（cluster==d）返回；
var x=d.x-cluster.x，
y=d.y-cluster.y，
l=数学sqrt（x*x+y*y），
r=d.radius+cluster.radius；
如果（l！=r）{
l=（l-r）/l*α；
d、 x-=x*=l；
d、 y-=y*=l；
簇x+=x；
簇y+=y；
}
};
}
//解决d和所有其他圆之间的碰撞。
函数碰撞（alpha）{
var四叉树=d3.geom.quadtree（节点）；
返回函数（d）{
var r=d.radius+maxRadius+Math.max（填充，簇填充），
nx1=d.x-r，
nx2=d.x+r，
ny1=d.y-r，
ny2=d.y+r；
四叉树访问（函数（四叉树，x1，y1，x2，y2）{
if（quad.point&&（quad.point！==d））{
var x=d.x-四点x，
y=d.y-四点y，
l=数学sqrt（x*x+y*y），
r=d.radius+quad.point.radius+（d.cluster===quad.point.cluster？填充：clusterPadding）；
if（lnx2 | x2ny2 | y2

您正在将文本DOM添加到圆DOM中

这就是你没有看到文本的原因

<circle cx="331.0297405069362" cy="238.4899367858363" style="fill: rgb(255, 127, 14);" r="24.842603758681765">
    <text dx="10" dy=".35em" style="stroke: gray;">test</text>
</circle>

将圆添加到组中：

node.append("circle")
    .style("fill", function (d) {
    return color(d.cluster);
}).attr("r", function(d){return d.radius})

向组中添加文本

//add text to the group    
node.append("text")
    .text(function (d) {
    return d.name;
})
.attr("dx", -10)
    .attr("dy", ".35em")
    .text(function (d) {
    return d.name
})
    .style("stroke", "gray");

在tick函数中，我们需要移动整个组，而不是更新圆的cx-cy，因此使用像thsi这样的变换：

function tick(e) {
    node.each(cluster(10 * e.alpha * e.alpha))
        .each(collide(.5))
    //.attr("transform", functon(d) {});
    .attr("transform", function (d) {
        var k = "translate(" + d.x + "," + d.y + ")";
        return k;
    })

}

---

工作代码。

哇，非常感谢！！谢谢Cyril和Stackoverflow。我被说服了！希望有一天能帮到你，但现在非常感谢你抽出时间。

node.append("circle")
    .style("fill", function (d) {
    return color(d.cluster);
}).attr("r", function(d){return d.radius})

//add text to the group    
node.append("text")
    .text(function (d) {
    return d.name;
})
.attr("dx", -10)
    .attr("dy", ".35em")
    .text(function (d) {
    return d.name
})
    .style("stroke", "gray");

function tick(e) {
    node.each(cluster(10 * e.alpha * e.alpha))
        .each(collide(.5))
    //.attr("transform", functon(d) {});
    .attr("transform", function (d) {
        var k = "translate(" + d.x + "," + d.y + ")";
        return k;
    })

}