nodes and links
i wanna that... hmm
nodes over links...
understand??
please help me...
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body><div id="graph"></div></body>
CSS
.link {
stroke: #ccc;
stroke-opacity: .6;
}
.node {
stroke-width: 1.0px;
cursor: pointer;
}
.nodetext {
pointer-events: none;
font: 10px sans-serif;
}
body {
width: 100%;
height: 100%;
margin: none;
padding: none;
}
#graph {
width: 500px;
height: 500px;
border: 3px solid black;
border-radius: 12px;
margin: auto;
}
JavaScript
function myGraph(el) {
// Add and remove elements on the graph object
this.addNode = function (id) {
nodes.push({ "id": id });
update();
}
this.removeNode = function (id) {
var i = 0;
var n = findNode(id);
while (i < links.length) {
if ((links[i]['source'] == n) || (links[i]['target'] == n)) links.splice(i, 1);
else i++;
}
nodes.splice(findNodeIndex(id), 1);
update();
}
this.addLink = function (source, target) {
links.push({ "source": findNode(source), "target": findNode(target) });
update();
}
var findNode = function (id) {
for (var i in nodes) { if (nodes[i]["id"] === id) return nodes[i] };
}
var findNodeIndex = function (id) {
for (var i in nodes) { if (nodes[i]["id"] === id) return i };
}
// set up the D3 svg in the specified element
var w = $(el).innerWidth(),
h = $(el).innerHeight();
var svg = this.svg = d3.select(el).append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.gravity(.05)
.distance(100)
.charge(-120)
.size([w, h]);
var nodes = force.nodes(),
links = force.links();
svg.append("g").attr("class", "links");
svg.append("g").attr("class", "nodes");
var update = function () {
var link = svg.select(".links").selectAll(".link")
.data(links, function (d) { return d.source.id + "-" + d.target.id; })
link.enter().append("line")
.attr("class", "link")
link.exit().remove();
var node = svg.select(".nodes").selectAll(".node")
.data(nodes, function (d) { return d.id; })
...