Question

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

ship.fire();

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是静态的。我现在正尝试使用存储过程从SQL Sever中提取数据，并希望使用数据库中的主键作为链接中的源和目标。所以我修改了json，它现在看起来像这样。请注意，这是json的片段我理解，节点中没有第3个主题可以处理链接数据中的1到3链接。

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 }
   ]
}

为了使这个修改工作，我不得不添加这段代码：

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",}
   ]
 }

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

由于佩里

Answer 1

文本应该来自linkName，但是在映射json.links时不包含这个：

目前：

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

Answer 2

要解决问题，我还必须映射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

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

2 个答案: