为什么D3链接标签停止工作

Why did the D3 link labels stop working

本文关键字：停止工作 标签 链接 D3 为什么      更新时间：2023-09-26

我有以下代码，用于将我的json数据中的链接名称放在我的节点链接上。

// Append text to Link lines
var linkText = vis.selectAll(".gLink")
.data(json.links)
.append("text")
.attr("class", "link")
.attr("x", function (d) {
    if (d.target.x > d.source.x) { return (d.source.x + (d.target.x - d.source.x) / 2); }
    else { return (d.target.x + (d.source.x - d.target.x) / 2); }
})
.attr("y", function (d) {
    if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y) / 2); }
    else { return (d.target.y + (d.source.y - d.target.y) / 2); }
})
.style("font", "normal 12px Arial")
.attr("dy", ".35em")
.text(function (d) { return d.linkName });

json数据如下所示

var json = {
"nodes": [
{ "name": "Fabby MONDESIR", "dob": "5.24.97", "ImageUrl": "http://172.18.215.101/MugImageAsp/MUGImageASP.ASP?WCI=RetrieveImage&WCE=FD635099", "ChartComments": "In Jail", },
{ "name": "ADNES D BRONSON", "dob": "5.24.97", "ImageUrl": "http://172.18.215.101/MugImageAsp/MUGImageASP.ASP?WCI=RetrieveImage&WCE=FD635199", "ChartComments": "Armed", },
],
"links": [
   { "source": 0, "target": 1, "linkName": "FCC", "value": 8 },
   { "source": 0, "target": 2, "linkName": "Arr", "value": 10 }
   ]
}

以上json是静态的。我现在正试图用存储过程从SQL Sever中提取数据，并希望使用数据库中的主键作为链接中的源和目标。我修改了json，现在是这样的。请注意，这是我理解的json代码片段，在节点中没有第三个主题与链接数据中的1到3链接一起工作。

var json = {
"nodes": [
{ "sId": "1", "name": "Fabby MONDESIR", "dob": "5.24.97", "ImageUrl": "http://172.18.215.101/MugImageAsp/MUGImageASP.ASP?WCI=RetrieveImage&WCE=FD635099", "chartComments": "Chart Comments"},
{ "sId": "2", "name": "ADNES D BRONSON", "dob": "5.24.97", "ImageUrl": "http://172.18.215.101/MugImageAsp/MUGImageASP.ASP?WCI=RetrieveImage&WCE=FD635098", "chartComments": "Chart Comments" }
],
   "links": [
   { "source": "1", "target": "2", "linkName": "FCC",},
   { "source": "1", "target": "3", "linkName": "Arr",}
   ]
 }

要使修改生效，我必须添加这段代码:

var nodeMap = {};
   json.nodes.forEach(function(x) { nodeMap[x.sId] = x; });
   json.links = json.links.map(function(x) {
       return {
           source: nodeMap[x.source],
           target: nodeMap[x.target]
          };
   });

链接工作正常，但由于某种原因，链接文本不再显示在行上。我不知道为什么这会导致链接文本停止工作json数据仍然能够做出正确的关联并绘制线条，所以有人知道为什么会发生这种情况吗?没有做任何其他更改，如果我恢复到原来的json结构并删除nodeMap代码，everythink再次工作。

谢谢佩里

文本应该来自linkName，但在映射json.links:

时不包含此内容。目前:

 json.links = json.links.map(function(x) {
       return {
           source: nodeMap[x.source],
           target: nodeMap[x.target]
          // add linkName when mapping//
          };
    });

为了纠正这个问题，我必须映射linkName以及源和目标。因此，工作代码现在看起来像这样

var nodeMap = {};
json.nodes.forEach(function (x) { nodeMap[x.SubjectID] = x; });
json.links = json.links.map(function (x) {
    return {
        source: nodeMap[x.source],
        target: nodeMap[x.target],
        linkName: x.linkName
相关文章：