76 строки
1.4 KiB
HTML
76 строки
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
<title>Convex Hull</title>
|
|
<script type="text/javascript" src="../../d3.js"></script>
|
|
<script type="text/javascript" src="../../d3.geom.js"></script>
|
|
<style type="text/css">
|
|
|
|
svg {
|
|
border: solid 1px #aaa;
|
|
background: #eee;
|
|
}
|
|
|
|
path {
|
|
fill: lightsteelblue;
|
|
stroke: #000;
|
|
}
|
|
|
|
circle {
|
|
fill: #fff;
|
|
stroke: #000;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript">
|
|
|
|
var w = 960,
|
|
h = 500;
|
|
|
|
var vertices = d3.range(15).map(function(d) {
|
|
return [
|
|
w / 4 + Math.random() * w / 2,
|
|
h / 4 + Math.random() * h / 2
|
|
];
|
|
});
|
|
|
|
var svg = d3.select("body")
|
|
.append("svg:svg")
|
|
.attr("width", w)
|
|
.attr("height", h)
|
|
.attr("pointer-events", "all")
|
|
.on("mousemove", move)
|
|
.on("click", click);
|
|
|
|
update();
|
|
|
|
function update() {
|
|
svg.selectAll("path")
|
|
.data([d3.geom.hull(vertices)])
|
|
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
|
|
.enter().append("svg:path")
|
|
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
|
|
|
|
svg.selectAll("circle")
|
|
.data(vertices.slice(1))
|
|
.enter().append("svg:circle")
|
|
.attr("transform", function(d) { return "translate(" + d + ")"; })
|
|
.attr("r", 3);
|
|
}
|
|
|
|
function move() {
|
|
vertices[0] = d3.svg.mouse(this);
|
|
update();
|
|
}
|
|
|
|
function click() {
|
|
vertices.push(d3.svg.mouse(this));
|
|
update();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|