JSFiddle - React, Tailwind, and code Playground
HTML
<div id="relationship_graph"></div>
JavaScript
var links = [
{ source: "a", target: "b", indicator_type: "x"},
{ source: "a", target: "c", indicator_type: "x"},
{ source: "e", target: "d", indicator_type: "x"},
{ source: "e", target: "d", indicator_type: "x"},
{ source: "e", target: "b", indicator_type: "x"},
{ source: "e", target: "c", indicator_type: "x"},
];
var w = 850,
h = 500;
var fill = d3.scale.category20();
var labelDistance = 0;
var vis = d3.select("#relationship_graph")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("pointer-events", "all")
.append('svg:g')
.call(d3.behavior.zoom().on("zoom", redraw))
.append('svg:g');
vis.append("rect")
.attr("width", w)
.attr("height", h)
.attr("opacity", 0);
function redraw() {
vis.attr("transform",
"translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
var nodes = {};
var labelAnchors = [];
var labelAnchorLinks = [];
// Compute the distinct nodes from the links.
links.forEach(function (link) {
link.source = nodes[link.source] || (nodes[link.source] = {
label: link.source,
type: "notice",
indicator_type: "notice"
});
link.target = nodes[link.target] || (nodes[link.target] = {
label: link.target,
type: "indicator",
indicator_type: link.indicator_type
});
link.weight = 1;
});
for (var node in nodes) {
var a = labelAnchors.push({
node: nodes[node]
});
var b = labelAnchors.push({
node: nodes[node]
});
labelAnchorLinks.push({
source: (a - 1),
target: (b - 1),
weight: 1
});
...