Javascript D3分配节点标签

我正在尝试制作一个d3力图，但是我无法让标签工作。有时文本会在屏幕顶部弹出。如何为每个节点分配一个标签（标签是其id）

这就是我尝试过的：

  var label = svg.selectAll(".node")
  .data(graph.nodes)
  .enter().append("text")
  .attr("class", "label")
  .text("test")

---

还有一个额外的问题，我如何在我的线条上得到箭头？

你的文字不是模拟的一部分。除此之外，当你这样做的时候

var label = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("text")

。。。您的“enter”选择将少一个元素，因为在该SVG中已经有一个类为

节点的
元素

解决方案：将圆圈和文本添加到组中：

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("foo")
    .data(graph.nodes)
    .enter().append("g");

var circles = node.append("circle")
    .attr("r", 5)
    .attr("fill", function(d) {
        return d3.color(d.color);
    })
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

var label = node.append("text")
    .attr("class", "label")
    .text("test");

并在勾选的
功能中使用
transform
：

node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
})

以下是您的更新代码：


（代码>代码>var图形=JSON.JSON<代码>var图形=JSON.代码>代码>VAP P P<代码>VAP P P<<代码>VAP图形=jsjson..JSON.语法语法语法语法语法语法语法语法语法语法。解析（{“节点”节点：：{“节点”节点：：{“节点”节点：：{“id”：“id”：“0”、“颜色：：：”，，{“id”4444E5E5号5号““““，，“颜色：““““；颜色：：”，，[代码>节点节点节点节点节点节点节点节点节点：：：，，{“节点节点节点节点节点节点：：：：：：：：：：：““““““““““““““““{”节点节点节点节点节点节点节点：，，，，，，，，，，，，，，，，，，，，，，[节点节点节点节点节点：：：：：：：：：：，，“8”，“颜色”：“#中交”}，{“id”：“9”，“颜色”：“#中交”}，{“id”：“10”，“颜色”：“id:“12”、“颜色：”，{“id:“12”、“颜色：”，，，{“id:“12”、“颜色：”，颜色：”，，，{“id:“CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC，，{“id:“13”、“id:“13”、“颜色：”，颜色：”，颜色：”，，，，，，，[id:“13”、“颜色：，颜色：”，颜色：”，13，，，，，，颜色：，颜色：，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，427291}，{“来源”：3，“目标：4，“权重”：0.436380368086641}，{“来源”：4，“目标”：5，“权重”：-0.5385567058738547}，{“来源”：1，“目标”：2，“权重”：-0.277729004201837}，{“来源”：2，“目标”：3，“权重”：0.7675128737907505}，{“来源”：13，“目标”：14，“权重”：0.5519067984674436}，{“来源”：14，“目标”：15，“权重”：0.8326697502495}，{“来源”，目标：7，“权重”“：0.8607887414383458}，{“来源”：7，“目标”：8，“重量”：-0.8965760877371078}，{“来源”：8，“目标”：9，“重量”：-0.2488791800975232}，{“来源”：9，“目标”：10，“重量”：-0.646075500567235}，{“来源”：12，“目标”：13，“重量”：0.40622804770087395}，{“来源”：0，“目标”：11，“重量”：0.24806004723386413}，{“来源”：11，“目标”：80312 389385}；
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{
返回d.id；
}))
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“笔划宽度”，函数（d）{
返回数学sqrt（d.重量）；
})
var node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“foo”）
.数据（图.节点）
.enter（）.append（“g”）；
var circles=node.append（“圆”）
.attr（“r”，5）
.attr（“填充”，功能（d）{
返回d3.颜色（d.颜色）；
})
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
var label=node.append（“文本”）
.attr（“类别”、“标签”）
.文本（“测试”）；
node.append（“标题”）
.文本（功能（d）{
返回d.id；
});
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
函数勾选（）{
链接
.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
节点
.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
})
}
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}
您的文本不是模拟的一部分。除此之外，当你这样做的时候

var label = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("text")

。。。您的“enter”选择将少一个元素，因为在该SVG中已经有一个类为
节点的
元素

解决方案：将圆圈和文本添加到组中：

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("foo")
    .data(graph.nodes)
    .enter().append("g");

var circles = node.append("circle")
    .attr("r", 5)
    .attr("fill", function(d) {
        return d3.color(d.color);
    })
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

var label = node.append("text")
    .attr("class", "label")
    .text("test");

并在勾选的
功能中使用
transform
：

node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
})

以下是您的更新代码：


（代码>代码>var图形=JSON.JSON<代码>var图形=JSON.代码>代码>VAP P P<代码>VAP P P<<代码>VAP图形=jsjson..JSON.语法语法语法语法语法语法语法语法语法语法。解析（{“节点”节点：：{“节点”节点：：{“节点”节点：：{“id”：“id”：“0”、“颜色：：：”，，{“id”4444E5E5号5号““““，，“颜色：““““；颜色：：”，，[代码>节点节点节点节点节点节点节点节点节点：：：，，{“节点节点节点节点节点节点：：：：：：：：：：：““““““““““““““““{”节点节点节点节点节点节点节点：，，，，，，，，，，，，，，，，，，，，，，[节点节点节点节点节点：：：：：：：：：：，，“8”，“颜色”：“#中交”}，{“id”：“9”，“颜色”：“#中交”}，{“id”：“10”，“颜色”：“id:“12”、“颜色：”，{“id:“12”、“颜色：”，，，{“id:“12”、“颜色：”，颜色：”，，，{“id:“CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC，，{“id:“13”、“id:“13”、“颜色：”，颜色：”，颜色：”，，，，，，，[id:“13”、“颜色：，颜色：”，颜色：”，13，，，，，，颜色：，颜色：，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，427291}，{“来源”：3，“目标：4，“权重”：0.436380368086641}，{“来源”：4，“目标”：5，“权重”：-0.5385567058738547}，{“来源”：1，“目标”：2，“权重”：-0.277729004201837}，{“来源”：2，“目标”：3，“权重”：0.7675128737907505}，{“来源”：13，“目标”：14，“权重”：0.5519067984674436}，{“来源”：14，“目标”：15，“权重”：0.8326697502495}，{“来源”，目标：7，“权重”“：0.8607887414383458}，{“来源”：7，“目标”：8，“重量”：-0.8965760877371078}，{“来源”：8，“目标”：9，“重量”：-0.2488791800975232}，{“来源”：9，“目标”：10，“重量”：-0.646075500567235}，{“来源”：12，“目标”：13，“重量”：0.40622804770087395}，{“来源”：0，“目标”：11，“重量”：0.24806004723386413}，{“来源”：11，“目标”：80312 389385}；
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{
返回d.id；
}))
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
var链路