An interactive demonstration of d3-voronoi, showing the Delaunay triangulation.
Delaunay Triangulation
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.triangles { | |
fill: none; | |
} | |
.links { | |
stroke: #000; | |
} | |
.sites { | |
fill: #000; | |
stroke: #fff; | |
} | |
.triangles .primary { | |
fill: #f00; | |
} | |
.links .primary { | |
stroke: #fff; | |
} | |
.sites :first-child { | |
fill: #fff; | |
} | |
</style> | |
<svg width="960" height="500"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg").on("touchmove mousemove", moved), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"); | |
var sites = d3.range(100) | |
.map(function(d) { return [Math.random() * width, Math.random() * height]; }); | |
var voronoi = d3.voronoi(); | |
var triangle = svg.append("g") | |
.attr("class", "triangles") | |
.selectAll("path") | |
.data(voronoi.triangles(sites)) | |
.enter().append("path") | |
.call(redrawTriangle); | |
var link = svg.append("g") | |
.attr("class", "links") | |
.selectAll("line") | |
.data(voronoi.links(sites)) | |
.enter().append("line") | |
.call(redrawLink); | |
var site = svg.append("g") | |
.attr("class", "sites") | |
.selectAll("circle") | |
.data(sites) | |
.enter().append("circle") | |
.attr("r", 2.5) | |
.call(redrawSite); | |
function moved() { | |
sites[0] = d3.mouse(this); | |
redraw(); | |
} | |
function redraw() { | |
var diagram = voronoi(sites); | |
triangle = triangle.data(diagram.triangles()), triangle.exit().remove(); | |
triangle = triangle.enter().append("path").merge(triangle).call(redrawTriangle); | |
link = link.data(diagram.links()), link.exit().remove(); | |
link = link.enter().append("line").merge(link).call(redrawLink); | |
site = site.data(sites).call(redrawSite); | |
} | |
function redrawTriangle(triangle) { | |
triangle | |
.classed("primary", function(d) { return d[0] === sites[0] || d[1] === sites[0] || d[2] === sites[0]; }) | |
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }); | |
} | |
function redrawLink(link) { | |
link | |
.classed("primary", function(d) { return d.source === sites[0] || d.target === sites[0]; }) | |
.attr("x1", function(d) { return d.source[0]; }) | |
.attr("y1", function(d) { return d.source[1]; }) | |
.attr("x2", function(d) { return d.target[0]; }) | |
.attr("y2", function(d) { return d.target[1]; }); | |
} | |
function redrawSite(site) { | |
site | |
.attr("cx", function(d) { return d[0]; }) | |
.attr("cy", function(d) { return d[1]; }); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment