JSFiddle - React, Tailwind, and code Playground
JavaScript
var findNode = function(id) {
for (var i in force.nodes()) {
if (force.nodes()[i]["name"] == id) return force.nodes()[i]
};
return null;
}
var pushLink = function (link) {
//console.log(link)
if(findNode(link.source)!= null && findNode(link.target)!= null) {
force.links().push ({
"source":findNode(link.source),
"target":findNode(link.target)
})
}
}
data= {
"nodes": [
{
"name": "test1"
},
{
"name": "test2"
},
{
"name": "test3"
}
],
"links": [
{
"source": "test1",
"target": "test2"
},
{
"source": "test2",
"target": "test3"
}
]
}
//d3.json("http://katejustin.com/autosys1.json", function(data) {
//var nodes = {};
//data.links.forEach(function(link) {
// link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
// link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); });
var width = 200,
height = 200;
var svg = d3.select("body").append("svg:svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.nodes(data.nodes)
.size([width, height])
.distance(100)
.charge(-1000)
.start();
data.links.forEach(pushLink)
console.log(force.nodes())
console.log(force.links())
//});