将文本标签添加到强制有向图中的 d3 节点并在悬停时调整大小

IT技术 javascript svg d3.js label force-layout
2021-02-23 06:54:02

我正在尝试向 d3 Force Directed Graph 中的节点添加文本标签，似乎存在问题。这是我的小提琴：

在此处输入图片说明

当我像这样添加节点名称时：

node.append("text")
    .attr("class", "word")
    .attr("dy", ".35em")
    .text(function(d) {
        console.log(d.name);
        return d.name;
    });

没有变化，但名称正在被记录。

当我尝试使用边界框时，节点标签出现但节点堆叠在框的左上角而节点链接很好。这个小提琴是我投入的努力的结果。谁能告诉我是什么我做错了吗？

1个回答

您正在一个圆圈内添加一个文本元素，这是行不通的。您可以在 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] + ')'; 
  });    

});

你的这个策略的一个分支在这里

我把 exit().remove() 调用放在哪里？您需要拥有它才能更新图表
2021-04-19 06:54:02
在force.on('tick', callback)调用之前或之后，可能在drawGraph原始小提琴jsfiddle.net/draditya91/RRUzZ上的函数内部
2021-04-21 06:54:02
几乎是我想要的，必须编辑一些以在悬停时重新调整大小。非常感谢。
2021-04-27 06:54:02
我知道这篇文章很旧，但请注意 .call(force.drag) 应该在 gnodes 上，而不是节点上。
2021-04-27 06:54:02
使用call(force.drag)ongnodes将允许用户拖动标签或圆圈（组下的所有内容），而使用它们node只允许拖动圆圈。
2021-05-16 06:54:02
其它你可能感兴趣的问题
上一篇如何访问上传的 JSON 文件的数据？ 下一篇如何使用 Promise.all 将对象作为输入