JSFiddle - React, Tailwind, and code Playground
HTML
<div id="network"></div>
CSS
line {
stroke: black;
}
JavaScript
//d3.json("http://localhost:8888/mydrupal/relationships?nocache=" + (new Date()).getTime(),function(error,members){
var members = {"organizations":[{"member":{"name":"Green 13","target":"TCAN","category":"community group","source":"G13"}},{"member":{"name":"TCAN","target":"TRSG","category":"organization","source":"TCAN"}},{"member":{"name":"ZCO","target":"TCAN","category":"organization","source":"ZCO"}},{"member":{"name":"Rita Bijons","target":"G13","category":"volunteer","source":"Rita"}},{"member":{"name":"Rita Bijons","target":"ZCO","category":"volunteer","source":"Rita"}}]};
var width = 500, height = 500;
var links=members.organizations.map(function(members) {
return members.member;
});
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.name, category: link.category});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.name, category: link.category});
});
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
.start();
var svg = d3.select("#network")
.append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
//.on("mouseover", mouseover)
//.on("mouseout", mouseout)
.call(force.drag);
var color = d3.scale.category10();
node.append("circle")
.attr("r", 8)
.style("fill", function (d) {
return color(d.category);
});
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
function tick() {
link
.attr("x1", function(d) { return d.source.x; })
...