如何在 D3js 强制定向布局中显示双向链接/路径/行的标签答案

【问题标题】：How to display label for bi-direct link/path/line in D3js force directed layout如何在 D3js 强制定向布局中显示双向链接/路径/行的标签
【发布时间】：2014-03-27 05:08:56
【问题描述】：

我正在尝试使用 D3sj 强制定向布局绘制网络拓扑。我用链接和节点做了一个基本的拓扑。但是，现在我想显示每个节点上每个链接的接口名称，如下图所示。你们能指导我怎么做吗？

提前谢谢你！

P/S 我在这里附上了我的拓扑！1

【问题讨论】：

标签： d3.js force-layout topology

【解决方案1】：

理想情况下，您应该展示您已经编写的 javascript，并解释它做了什么，以及缺少什么。话虽如此，我最近完成了与您描述的类似项目的工作，因此手头有以下结果。

这个jsfiddle 会做你正在尝试的事情吗？

有两个关键组成部分。首先是定义文本元素（这里我将它们附加到 SVG 元素）：

var text = svg.selectAll('text')
    .data(force.nodes())
    .enter().append('text')
        .text(function (d) { return d.name });

这里我假设nodes[] 数组包含要显示的具有.name 属性的对象。

第二个组件是在tick处理程序内将文本元素翻译到它们的适当位置：

function tick () {
    text.attr('transform', function (d) {
        return 'translate(' + d.x + ',' + d.y + ')';
    });
    // Other code for nodes and links
}

请参阅jsfiddle 以获取完整的工作示例，包括注释代码，如果您想尝试更接近地重现示例图像，则应允许您在节点处添加图像。

【讨论】：