|
|
|
|
@ -14,6 +14,15 @@ var nodesData = [
|
|
|
|
|
{"name": "Emerald", "sex": "F"}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var linksData = [
|
|
|
|
|
{"source": "Travis", "target": "Rake"},
|
|
|
|
|
{"source": "Diana", "target": "Rake"},
|
|
|
|
|
{"source": "Diana", "target": "Rachel"},
|
|
|
|
|
{"source": "Rachel", "target": "Rake"},
|
|
|
|
|
{"source": "Rachel", "target": "Shawn"},
|
|
|
|
|
{"source": "Emerald", "target": "Rachel"}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var nodes = d3.select("g")
|
|
|
|
|
.selectAll("circle")
|
|
|
|
|
.data(nodesData)
|
|
|
|
|
@ -24,6 +33,10 @@ d3.forceSimulation()
|
|
|
|
|
.nodes(nodesData)
|
|
|
|
|
.force("charge_force", d3.forceManyBody())
|
|
|
|
|
.force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2)) //position centering force at center x,y coords
|
|
|
|
|
.force("links", d3.forceLink(linksData)
|
|
|
|
|
.id(function(datum){
|
|
|
|
|
return datum.name
|
|
|
|
|
}))
|
|
|
|
|
.on("tick", function(){
|
|
|
|
|
nodes.attr("cx", function(datum) { return datum.x; })
|
|
|
|
|
.attr("cy", function(datum) { return datum.y; });
|
|
|
|
|
|