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

Question

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

提前感谢!

p/S我把我的拓扑附在这里!1

Answer 1

理想情况下，您应该展示您已经编写的javascript，并解释它的功能和缺失的内容。话虽如此，我最近完成了一个与你描述的类似的项目，所以有了下面的结果。

这只是做你想做的吗?

有两个关键组成部分。第一个是定义文本元素(这里我将它们附加到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以获得完整的工作示例，其中包括注释代码，如果您想更接近地重现示例图像，则可以在节点上添加图像。