In my possession is a json file containing nodes and links defined with source and target attributes.
{
"links":[
{"_id": "5a4b2866235fa755b6576903", "target": 6746, "source": 2169},
{"_id": "5a4b2866235fa755b65768e3", "target": 6746, "source": 6357},
{"_id": "5a4b2866235fa755b6576641", "target": 7045, "source": 8590}
],
"nodes":[
{"_id": "5a4b281e235fa755b6576340", "id": 6746, "Citation": "Chandler", "citedNo": "0", "size": 10},
{"_id": "5a4b281d235fa755b657447f", "id": 1195, "Citation": "Aaron", "citedNo": "0", "size": 0},
{"_id": "5a4b281e235fa755b657591f", "id": 4438, "Citation": "Chris", "citedNo": "0", "size": 10},
{"_id": "5a4b281e235fa755b6575f31", "id": 7045, "Citation": "Brittany", "citedNo": "0", "size": 10},
{"_id": "5a4b281e235fa755b6575f27", "id": 2169, "Citation": "James", "citedNo": "0", "size": 10},
{"_id": "5a4b281e235fa755b6575ecb", "id": 6357, "Citation": "David", "citedNo": "0", "size": 10},
{"_id": "5a4b281e235fa755b6575750", "id": 8590, "Citation": "Kris", "citedNo": "0", "size": 10}
]
}
Upon loading the above data from the file, the links are visible. However, when attempting to load the data dynamically, the links are not displayed.
The reason for dynamic loading is due to a keyword search using ElasticSearch on MongoDB, which generates a json with nodes, links (sources and targets) referenced in the js to create a D3 network visualization.
The need for dynamic loading arises from the limitless search use cases, making it suboptimal to filter and store numerous versions of json files.
Code for creating the arrays:
var arr = new Object;
arr["nodes"] = nodearray;
arr["links"] = linkarray;
Script for building D3 network visualization:
d3.json('d3datap.json', function(error, graph) {
// console.log(JSON.stringify(arr));
var graph = JSON.parse(JSON.stringify(arr));
console.log(graph.nodes);
console.log(graph.links);
const width = 1200;
const height = 500;
const mouseOverFunction = function (d) {
const circle = d3.select(this);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.Party; });
// More visualization logic here...
});
CSS styling:
.node circle {
stroke: white;
stroke-width: 1.5px;
opacity: 1.0;
}
line {
stroke: black;
stroke-width: 1.5px;
stroke-opacity: 1.0;
}
While the console displays the json data correctly, the links do not appear. I have searched extensively for solutions to the issue of dynamically loading json into D3, but none have resolved my problem. Any assistance in identifying the issue would be highly appreciated.