{
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(40,0)");
var graph = {
nodes: [
{id: "Abdul Ramazi"},
{id: "Ralph Goode"},
{id: "Jamal Kalifa"},
{id: "Faysal Goba"},
{id: "Mukhtar Galab"},
{id: "Hani al-Hallak"},
{id: "Bagwant Dhaliwal"},
{id: "Hans Pakes"}
],
links: [
{source: "Ralph Goode", target: "Jamal Kalifa", date: "6 April"},
{source: "Abdul Ramazi", target: "Faysal Goba", date: "21 April"},
{source: "Abdul Ramazi", target: "Mukhtar Galab", date: "21 April"},
{source: "Abdul Ramazi", target: "Bagwant Dhaliwal", date: "21 April"},
{source: "Abdul Ramazi", target: "Hans Pakes", date: "21 April"},
{source: "Abdul Ramazi", target: "Faysal Goba", date: "22 April"},
{source: "Abdul Ramazi", target: "Mukhtar Galab", date: "22 April"},
{source: "Abdul Ramazi", target: "Bagwant Dhaliwal", date: "22 April"},
{source: "Abdul Ramazi", target: "Hans Pakes", date: "22 April"},
{source: "Mukhtar Galab", target: "Abdul Ramazi", date: "27 April"}
]
};
var node = g.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node");
node.append("circle")
.attr("r", 10)
.attr("fill", "lightblue");
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.id });
// Add edges to the graph
var link = g.selectAll(".link")
.data(graph.links)
.enter().append("path")
.attr("class", "link")
.attr("marker-end", "url(#arrowhead)")
.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});
// Add arrowhead to the edges
svg.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("viewBox", "0 -5 10 10")
.attr("refX", 10)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5")
.attr("class", "arrowhead");
// Draw the edges with arrowheads
svg.selectAll(".link")
.data(graph.links)
.enter().append("path")
.attr("class", "link")
.attr("marker-end", "url(#arrowhead)")
.attr("d", function(d) {
return "M" + d.source.x + "," + d.source.y
+ "C" + (d.source.x + d.target.x) / 2 + "," + d.source.y
+ " " + (d.source.x + d.target.x) / 2 + "," + d.target.y
+ " " + d.target.x + "," + d.target.y;
});
// Draw the nodes
svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 20)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.style("fill", "lightblue");
// Add labels to the nodes
svg.selectAll(".label")
.data(graph.nodes)
.enter().append("text")
.attr("class", "label")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y + 30; })
.attr("text-anchor", "middle")
.text(function(d) { return d.name; });}