I've come across an issue with my code that previously displayed link names from json data on node links.
// 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 });
The initial json data is structured like this:
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 }
]
}
Now, I am attempting to fetch data dynamically from SQL Server using a stored procedure and utilizing the primary key in the database as the source and target in the links. The modified json structure looks like this:
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" }
]
}
In order for the modifications to take effect, I had to incorporate the following piece of code:
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]
};
});
Although the linking now functions correctly, the link text no longer appears on the lines. Despite maintaining correct associations and line drawing with the json data, the reason behind the disappearance of link text after implementation of nodeMap remains unclear. Reverting back to the original json structure resolves the issue. Any insights would be greatly appreciated!
Thank you, Perry