如何在 d3 有向图中将标签添加到我的节点[重复]

Question

我有一个 plnkr，它可以创建像这样的节点有向图： http://plnkr.co/edit/Usru9pGp98ju2d0St6Wz?p=preview

目前，当我们使用此功能将鼠标悬停在节点上时，它会显示节点标题：

.on('mouseover', function(d) {
        textTarget = d

        text.attr('transform', 'translate(' + d.x + ',' + d.y + ')')
            .text(d.id)
            .style('display', null)

        d3.select(this)
          .style('fill', colors.nodes.hover)

        d3.selectAll(childNodes(d))
            .style('fill', colors.nodes.hover)
            .style('stroke', colors.nodes.method)
            .style('stroke-width', 2)

        d3.selectAll(parentNodes(d))
            .style('fill', colors.nodes.dep)
            .style('stroke', colors.nodes.method)
            .style('stroke-width', 2)
    })

但我的想法是每次都显示标签。

我发现了一些类似的问题，他们要求将标签附加到节点，所以我尝试了这个：

node.append("text")
.attr('transform', function())
.attr('transform', 'translate(' + d.x + ',' + d.y + ')')
.text(d.id)
.style('display', null)

但是这样做会破坏我的图表。

我对 d3 世界并不陌生，因此无法弄清楚在这种情况下到底出了什么问题。

任何人都可以帮助我始终为所有节点显示标签（在节点圈内或附加它）

Answer 1

方法：

所以我的方法是创建组元素g，其中包含circle 和text，然后我们可以使用强制布局通过变换来定位它们。这样我们只关心组元素的位置，并且带有文本的圆圈应该跟随该位置。所以节点结构可能是这样的：

<g transform='translate(30,70)'>
    <circle r='3'>/<circle> 
    <text>sample text</text>
</g>

代码：

您的示例中有很多代码，因此我将只专注于在圆圈上添加持久标签。这可能会破坏我不关注的其他一些事情，但应该为您指明方向，希望您能够解决其余的问题，如果不随意询问的话。

首先你必须使用你的 plunker，因此将数据与 g 元素而不是 circle 关联：

node = vis.selectAll('g.node')
    .data(nodes, function(d) { return d.filename })
    .enter().append('g');

然后您可以将圆圈附加到那些 g 元素，在这种情况下，无需定义 cx 和 cy 因为这是由应用于 g 元素的 transform 处理的，所以您只需要指定r 以及您想要应用的任何其他样式：

node.append('circle')
.attr('class', 'node')
.attr('r', function(d) {
    return scale * (d.root ? 8 : d.module && !d.native ? 5 : 3)
})
(...)

现在您可以添加标签了：

node.append('text')
.text(function(d){return d.id})
.style('text-anchor',middle); // this will center label horizontally

最后一步是更新 on 'tick' 函数，就像它之前更新圆圈位置一样，现在我们希望它更新 g 位置，所以而不是：

node.attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; });

你应该这样做：

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

这里你有我的改动，希望这就是你所要求的。 http://plnkr.co/edit/Q69DkEH5Z9aOe92UwlOB?p=preview

如果您有任何问题，请随时提问：)