A quick v4 update to this v3 block.
There are a few changes to facilitate the use of a title centered on the convex hull centroid:
// create a polygon
var polygon = d3.polygonHull(vertices.map(function(d) { return d; }) );
// use the polygon to update the convex hull
hull.datum(polygon).attr("d", function(d) { return "M" + d.join("L") + "Z"; });
// also use it to place the text (raise so it stays above new nodes)
text.attr("transform","translate("+d3.polygonCentroid(polygon)+")").raise();
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>Convex Hull</title> | |
| <style> | |
| rect { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| .hull { | |
| fill: lightsteelblue; | |
| stroke: lightsteelblue; | |
| stroke-width: 32px; | |
| stroke-linejoin: round; | |
| } | |
| circle { | |
| fill: white; | |
| stroke: yellow; | |
| stroke-width: 1.5px; | |
| } | |
| text { | |
| font-size: 32px; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var randomX = d3.randomNormal(width / 2, 60), | |
| randomY = d3.randomNormal(height / 2, 60), | |
| vertices = d3.range(100).map(function() { return [randomX(), randomY()]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .on("mousemove", function() { vertices[0] = d3.mouse(this); redraw(); }) | |
| .on("click", function() { vertices.push(d3.mouse(this)); redraw(); }); | |
| svg.append("rect") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var hull = svg.append("path") | |
| .attr("class", "hull"); | |
| var circle = svg.selectAll("circle"); | |
| var text = svg.append("text").text("Hull Title").attr("text-anchor","middle"); | |
| redraw(); | |
| function redraw() { | |
| var polygon = d3.polygonHull(vertices.map(function(d) { return d; }) ); | |
| hull.datum(polygon).attr("d", function(d) { return "M" + d.join("L") + "Z"; }); | |
| text.attr("transform","translate("+d3.polygonCentroid(polygon)+")").raise(); | |
| circle = svg.selectAll("circle").data(vertices); | |
| circle.enter().append("circle").attr("r", 3).attr("transform", function(d) { return "translate(" + d + ")"; }); | |
| circle.attr("transform", function(d) { return "translate(" + d + ")"; }); | |
| } | |
| </script> |
