mirror of
https://github.com/d3/d3.git
synced 2026-02-01 16:41:44 +00:00
94 lines
2.3 KiB
HTML
94 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Force-Directed Layout</title>
|
|
<script type="text/javascript" src="../../d3.v2.js"></script>
|
|
<style type="text/css">
|
|
|
|
div.node {
|
|
border-radius: 6px;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin: -6px 0 0 -6px;
|
|
position: absolute;
|
|
}
|
|
|
|
div.link {
|
|
position: absolute;
|
|
border-bottom: solid #999 1px;
|
|
height: 0;
|
|
-webkit-transform-origin: 0 0;
|
|
-moz-transform-origin: 0 0;
|
|
-ms-transform-origin: 0 0;
|
|
-o-transform-origin: 0 0;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript">
|
|
|
|
var width = 960,
|
|
height = 500,
|
|
radius = 6,
|
|
fill = d3.scale.category20();
|
|
|
|
var force = d3.layout.force()
|
|
.charge(-120)
|
|
.linkDistance(30)
|
|
.size([width, height]);
|
|
|
|
var vis = d3.select("body").append("div")
|
|
.style("width", width + "px")
|
|
.style("height", height + "px");
|
|
|
|
d3.json("miserables.json", function(json) {
|
|
var link = vis.selectAll("div.link")
|
|
.data(json.links)
|
|
.enter().append("div")
|
|
.attr("class", "link");
|
|
|
|
var node = vis.selectAll("div.node")
|
|
.data(json.nodes)
|
|
.enter().append("div")
|
|
.attr("class", "node")
|
|
.style("background", function(d) { return fill(d.group); })
|
|
.style("border-color", function(d) { return d3.rgb(fill(d.group)).darker(); })
|
|
.call(force.drag);
|
|
|
|
force
|
|
.nodes(json.nodes)
|
|
.links(json.links)
|
|
.on("tick", tick)
|
|
.start();
|
|
|
|
function tick() {
|
|
node.style("left", function(d) { return (d.x = Math.max(radius, Math.min(width - radius, d.x))) + "px"; })
|
|
.style("top", function(d) { return (d.y = Math.max(radius, Math.min(height - radius, d.y))) + "px"; });
|
|
|
|
link.style("left", function(d) { return d.source.x + "px"; })
|
|
.style("top", function(d) { return d.source.y + "px"; })
|
|
.style("width", length)
|
|
.style("-webkit-transform", transform)
|
|
.style("-moz-transform", transform)
|
|
.style("-ms-transform", transform)
|
|
.style("-o-transform", transform)
|
|
.style("transform", transform);
|
|
}
|
|
|
|
function transform(d) {
|
|
return "rotate(" + Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) * 180 / Math.PI + "deg)";
|
|
}
|
|
|
|
function length(d) {
|
|
var dx = d.target.x - d.source.x,
|
|
dy = d.target.y - d.source.y;
|
|
return Math.sqrt(dx * dx + dy * dy) + "px";
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|