96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
|
function draw_graph(suffix) {
|
||
|
|
var width = window.innerWidth;
|
||
|
|
var height = window.innerHeight;
|
||
|
|
|
||
|
|
var fill = d3.scale.category20();
|
||
|
|
|
||
|
|
var graph_elem = document.getElementById("graph_svg");
|
||
|
|
if (graph_elem) {
|
||
|
|
graph_elem.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
var svg = d3.select("#graph_container").append("svg")
|
||
|
|
.attr("id", "graph_svg")
|
||
|
|
.attr("width", width)
|
||
|
|
.attr("height", height)
|
||
|
|
.attr("version", "1.1")
|
||
|
|
.attr("xmlns", "http://www.w3.org/2000/svg")
|
||
|
|
.attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
|
||
|
|
.call(d3.behavior.zoom().on("zoom", function () {
|
||
|
|
svg.attr("transform", "scale(" + d3.event.scale + ")")
|
||
|
|
}));
|
||
|
|
|
||
|
|
var force = d3.layout.force()
|
||
|
|
.gravity(0.25)
|
||
|
|
.charge(-1200)
|
||
|
|
//.gravity(0)
|
||
|
|
//.charge(0)
|
||
|
|
.linkDistance(150)
|
||
|
|
.size([width, height]);
|
||
|
|
|
||
|
|
var voronoi = d3.geom.voronoi()
|
||
|
|
.x(function(d) { return d.x; })
|
||
|
|
.y(function(d) { return d.y; })
|
||
|
|
.clipExtent([[0, 0], [width, height]]);
|
||
|
|
|
||
|
|
d3.json("graphs/graph" + suffix + ".json", function(error, json) {
|
||
|
|
if (error) throw error;
|
||
|
|
|
||
|
|
force
|
||
|
|
.nodes(json.nodes)
|
||
|
|
.links(json.links)
|
||
|
|
.start();
|
||
|
|
|
||
|
|
var link = svg.selectAll(".link")
|
||
|
|
.data(json.links)
|
||
|
|
.enter().append("line")
|
||
|
|
.attr("class", function(d) { return "link " + d.source.index + " " + d.target.index; });
|
||
|
|
|
||
|
|
var node = svg.selectAll(".node")
|
||
|
|
.data(json.nodes)
|
||
|
|
.enter().append("g")
|
||
|
|
.attr("class", "node")
|
||
|
|
.attr("id", function(d) { return d.id; })
|
||
|
|
.style("text-shadow", function(d) { return "2px 2px 4px" + d.color; })
|
||
|
|
.call(force.drag);
|
||
|
|
|
||
|
|
var circle = node.append("circle")
|
||
|
|
.attr("r", 5)
|
||
|
|
.style("stroke", function(d) { return d.color; })
|
||
|
|
.attr("class", "circle");
|
||
|
|
|
||
|
|
var hov_circle = node.append("circle")
|
||
|
|
.attr("r", 15)
|
||
|
|
.attr("class", "cell")
|
||
|
|
|
||
|
|
var id_link = node.append("a")
|
||
|
|
.attr("xlink:href", function(d) { return "https://amboss.space/node/" + d.id; })
|
||
|
|
.attr("target", "_blank");
|
||
|
|
|
||
|
|
var label = id_link.append("text")
|
||
|
|
.attr("dy", ".35em")
|
||
|
|
.text(function(d) { return d.name; });
|
||
|
|
|
||
|
|
force.on("tick", function() {
|
||
|
|
link
|
||
|
|
.attr("x1", function(d) { return d.source.x; })
|
||
|
|
.attr("y1", function(d) { return d.source.y; })
|
||
|
|
.attr("x2", function(d) { return d.target.x; })
|
||
|
|
.attr("y2", function(d) { return d.target.y; });
|
||
|
|
|
||
|
|
circle
|
||
|
|
.attr("cx", function(d) { return d.x; })
|
||
|
|
.attr("cy", function(d) { return d.y; });
|
||
|
|
|
||
|
|
hov_circle
|
||
|
|
.attr("cx", function(d) { return d.x; })
|
||
|
|
.attr("cy", function(d) { return d.y; });
|
||
|
|
|
||
|
|
label
|
||
|
|
.attr("x", function(d) { return d.x + 8; })
|
||
|
|
.attr("y", function(d) { return d.y; });
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
draw_graph("_full");
|