D3.js力导向图连线标签不显示问题求助

你的连线标签不显示，甚至连连线和节点都无法正常渲染，主要有两个核心问题：

1. SVG元素嵌套错误（标签不显示的直接原因） #

在SVG规范里，<line>是基础图形元素，不能包含任何子元素。你把<text>直接append到<line>节点下，浏览器会直接忽略这些无效的嵌套元素，自然看不到标签。

2. 节点与连线的数据映射错误（导致布局完全失效） #

你的topo.links用a/z字段存储节点信息，但代码里却在找不存在的e.source/e.target；同时topo.nodes只有name属性，代码里却用n.id去匹配，这会导致edges数组里的source和target全是undefined，力导向布局根本无法工作。

修复后的完整代码 #

下面是修正后的代码，我解决了上述问题，同时保留了你原本的标签定位逻辑：

function xpos(s, t) { 
  var angle = Math.atan2(t.y - s.y, t.x - s.x); 
  return 30 * Math.cos(angle) + s.x; 
}; 
function ypos(s, t) { 
  var angle = Math.atan2(t.y - s.y, t.x - s.x); 
  return 30 * Math.sin(angle) + s.y; 
};

function init_drawing(json) {
    var svg = d3.select("body")
        .append("svg")
        .attr("width", 800)
        .attr("height", 600)
        .attr("class", "graph-svg-component");

    // 修正：根据节点名称匹配，适配你的topo数据结构
    var edges = [];
    json.links.forEach(function(e) {
        var sourceNode = json.nodes.filter(function(n) { return n.name === e.a[0]; })[0],
            targetNode = json.nodes.filter(function(n) { return n.name === e.z[0]; })[0];
        edges.push({ 
            source: sourceNode, 
            target: targetNode, 
            aLabel: e.a[1], // 存储a端的标签文本
            zLabel: e.z[1]  // 存储z端的标签文本
        });
    });

    var force = d3.layout.force()
        .gravity(0.1)
        .distance(100)
        .charge(-700)
        .size([800, 600])
        .nodes(json.nodes)
        .links(edges)
        .start();

    // 1. 独立创建连线元素
    var link = svg.selectAll("line")
        .data(edges)
        .enter().append("line")
        .attr("class", "default");

    // 2. 独立创建a端标签（和连线平行，不再嵌套）
    var aEnd = svg.selectAll(".aEnd")
        .data(edges)
        .enter().append("text")
        .attr('class', 'aEnd')
        .attr('text-anchor', 'middle')
        .text(function(d) { return d.aLabel; });

    // 3. 独立创建z端标签
    var zEnd = svg.selectAll(".zEnd")
        .data(edges)
        .enter().append("text")
        .attr('class', 'zEnd')
        .attr('text-anchor', 'middle')
        .text(function(d) { return d.zLabel; });

    // 创建节点容器，并添加圆形让节点可见
    var node = svg.selectAll(".node")
        .data(json.nodes)
        .enter().append("g")
        .attr("class", "node")
        .call(force.drag);
    
    node.append("circle")
        .attr("r", 10)
        .attr("class", "node");

    // 给节点添加名称标签（可选）
    node.append("text")
        .attr("dx", 12)
        .attr("dy", ".35em")
        .text(function(d) { return d.name; });

    force.on("tick", function() {
        // 更新连线位置
        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; });

        // 更新a端标签位置
        aEnd.attr('x', function(d) { return xpos(d.source, d.target); })
            .attr('y', function(d) { return ypos(d.source, d.target); });

        // 更新z端标签位置
        zEnd.attr('x', function(d) { return xpos(d.target, d.source); })
            .attr('y', function(d) { return ypos(d.target, d.source); });

        // 更新节点位置
        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    });
}

var topo = {};
topo.nodes = [
    {'name': 'Node 1'}, {'name': 'Node 2'}, {'name': 'Node 3'}, 
    {'name': 'Node 4'}, {'name': 'Node 5'}, {'name': 'Node 6'}, {'name': 'Node 7'} 
];
topo.links = [
    {'a': ['Node 1', 'one'], 'z': ['Node 2', 'two']}, 
    {'a': ['Node 2', 'three'], 'z': ['Node 3', 'four']}, 
    {'a': ['Node 2', 'five'], 'z': ['Node 4', 'six']}, 
    {'a': ['Node 1', 'seven'], 'z': ['Node 5', 'eight']}, 
    {'a': ['Node 1', 'nine'], 'z': ['Node 6', 'ten']}, 
    {'a': ['Node 1', 'eleven'], 'z': ['Node 7', 'twelve']} 
];
init_drawing(topo);

.node { fill: #88f; stroke: #44a; stroke-width: 1px; }
.aEnd, .zEnd { fill: #444; font-family: helvetica; font-size: 8pt; }
.default { stroke: #fbb; stroke-width: 4px; }
.outline { stroke: #844; stroke-width: 6px; }

关键修改点说明 #

• SVG结构修正：把<text>标签作为独立元素添加到svg中，不再嵌套在<line>里；
• 数据映射修正：根据topo.links里的节点名称匹配对应节点，同时存储标签文本；
• 节点可视化：添加了<circle>元素让节点可见（原来的代码只创建了容器没有图形）；
• 标签文本优化：直接使用你数据里的自定义标签内容，而非固定字符串。

内容的提问来源于stack exchange，提问作者Christoph