<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<title>My D3 Practice page </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!--<script src="directedGraph.js"></script>-->
<script src="directedGraphWithMovement.js"></script>
</body>
</html>
// Code goes here
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
.node {
cursor: move;
fill: #ccc;
stroke: #000;
stroke-width: 1.5px;
}
.node.fixed {
fill: #f00;
}
.node text {
pointer-events: none;
font: 12px sans-serif;
}
.node text {
font: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
.tftextinput{
margin: 0;
#padding: 5px 0px 0px 10px ;
right:0px;
font-family: Arial, Helvetica, sans-serif, FontAwesome;
font-size:14px;
border:1px solid #0076a3;
border-right:1px solid #0076a3;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
float: right;
position:fixed;
}
::-webkit-input-placeholder {
opacity: 0.2 ;
}
:-moz-placeholder { /* Firefox 18- */
opacity: 0.2 ;
}
::-moz-placeholder { /* Firefox 19+ */
opacity: 0.2 ;
}
:-ms-input-placeholder {
opacity: 0.2 ;
}
//WINDOW SETUP
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.append("g");
var link = svg.selectAll("path"),
node = svg.selectAll("g.gnode");
var force = d3.layout.force()
.size([width, height])
.linkDistance(150)
.friction(0.01)
.charge(-1000);
//.on("tick", tick);
//READ JSON FILE
d3.json("sampleInput.json", function(error, data) {
if (error) throw error;
var nodes = {};
var n = data.nodes.length;
force.nodes(data.nodes).links(data.links);
// Initialize the positions deterministically, for better results.
data.nodes.forEach(function(d, i) { d.x = d.y = width / n * i; });
// Run the layout a fixed number of times.
// The ideal number of times scales with graph complexity.
// Of course, don't run too long—you'll hang the page!
force.start();
for (var i = n; i > 0; --i)
force.tick();
force.stop();
// Center the nodes in the middle.
var ox = 0, oy = 0;
data.nodes.forEach(function(d) {
ox += d.x,
oy += d.y;
});
ox = ox / n - width / 2,
oy = oy / n - height / 2;
data.nodes.forEach(function(d) {
d.x -= ox,
d.y -= oy;
});
// Compute the distinct nodes from the links.
/*data.links.forEach(function(d){
d.source = nodes[d.source] || (nodes[d.source] = {name:d.source});
d.target = nodes[d.target] || (nodes[d.target] = {name:d.target});
});*/
svg.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("refX", 14) /*must be smarter way to calculate shift*/
.attr("refY", 1)
.attr("markerWidth", 6)
.attr("markerHeight", 4)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
link = link.data(data.links)
.enter().append("path")
.attr("class","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; })
.attr("d",linkArc)
.attr("marker-end", "url(#arrowhead)");
function linkArc(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;
}
node = node.data(data.nodes)
.enter().append("g")
.classed("gnode",true);
node.append("circle")
.attr("class", "node")
//.attr("cx", function(d) { return d.x; })
//.attr("cy", function(d) { return d.y; })
.attr("r",12)
.call(force.drag);
node.append("text")
.attr("x",15)
.attr("y",".21em")
.text(function (d) {
return d.name;
});
node.append("text")
.attr("x",15)
.attr("y","1em")
.text(function (d) {
return d.details;
});
node.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
/*
function tick() {
link.attr("d",linkArc)
node.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
}
function linkArc(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;
}
*/
{
"nodes": [
{"name": "Task 1", "details": "A"},
{"name": "Task 2", "details": "Task Discription here" },
{"name": "Task 3", "details": "Task Discription here"},
{"name": "Task 4", "details": "Task Discription here"},
{"name": "Task 5", "details": "Task Discription here"},
{"name": "Task 6", "details": "Task Discription here"}
],
"links": [
{"source": "Task 6", "target": "Task 2","type": 0},
{"source": "Task 2", "target": "Task 1","type": 0},
{"source": "Task 5", "target": "Task 2","type": 0},
{"source": "Task 4", "target": "Task 5","type": 0},
{"source": "Task 3", "target": "Task 5","type": 0}
]
}
//WINDOW SETUP
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.append("g");
var link = svg.selectAll("path"),
node = svg.selectAll("g.gnode");
var force = d3.layout.force()
.size([width, height])
.linkDistance(150)
.friction(0.01)
.charge(-1000)
.on("tick", tick);
var nodes = {};
var links = [];
var pathtype = [];
//READ JSON FILE
d3.json("sampleInput.json", function(error, graph) {
if (error) throw error;
links = graph.links;
// Compute the distinct nodes from the links.
links.forEach(function(d){
d.source = nodes[d.source] || (nodes[d.source] = {name:d.source});
d.target = nodes[d.target] || (nodes[d.target] = {name:d.target});
});
svg.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("refX", 14) /*must be smarter way to calculate shift*/
.attr("refY", 1)
.attr("markerWidth", 6)
.attr("markerHeight", 4)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
force.nodes(d3.values(nodes))
.links(links)
.start();
link = link.data(force.links())
.enter().append("path")
.attr("class","link")
.attr("marker-end", "url(#arrowhead)");
node = node.data(force.nodes())
.enter().append("g")
.classed("gnode",true);
node.append("circle")
.attr("class", "node")
.attr("r",12);
//.call(force.drag);
node.append("text")
.attr("x",15)
.attr("y",".31em")
.text(function (d) {
return d.name;
});
node.append("text")
.attr("x",15)
.attr("y",".71em")
.text(function (d) {
return d.details;
});
});
function tick() {
/*
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; });
*/
link.attr("d",linkArc)
node.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
}
function linkArc(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;
}