我正在尝试将文本标签添加到 d3 力定向图中的节点,似乎存在问题。 这是我的Fiddle :
当我像这样添加节点名称时:
node.append("text")
.attr("class", "word")
.attr("dy", ".35em")
.text(function(d) {
console.log(d.name);
return d.name;
});
没有变化,但名称正在记录。
当我尝试使用 bounding box 时,节点标 checkout 现,但节点堆叠在框的左上角,而节点链接正常。这 fiddle是我付出努力的结果。谁能告诉我我做错了什么?
最佳答案
您要在圆圈内添加一个文本元素,这是行不通的。您可以在 svg 元素下添加组,然后在每个组中附加圆圈和文本:
// Create the groups under svg
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true);
// Add one circle in each group
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
// Append the labels to each group
var labels = gnodes.append("text")
.text(function(d) { return d.name; });
force.on("tick", function() {
// Update the links
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
// Translate the groups
gnodes.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
这个策略的一个分支是 here
关于javascript - 将文本标签添加到 Force directed Graph 中的 d3 节点并在悬停时调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18164230/