Question

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

提前谢谢！

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

Answer 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，其中包括注释代码，如果您想尝试更仔细地重现样本图像，则应允许您在节点上添加图像。

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

1 个答案: