I have a series of dots plotted on a chart that looks similar to this:
and I would like to create a bounding polygon around them, like this:
I've found quite a good explanation of how to do this at
http://bl.ocks.org/gka/1552725
Calculate bounding polygon of alpha shape from the Delaunay triangulation but this is using version 3 of d3 and I am using version 4. I have managed to implement some of the example using the v4 but can't work out how to filter the triangles So far I've managed this:
I'd appreciate any help given. My code looks like this:
vertices = vertices.map((d) => {
//console.log(d)
return [xScale(d[0]),yScale(d[1])]
})
let alpha = 30
let dsq = function(a,b) {
var dx = a[0]-b[0], dy = a[1]-b[1];
return dx*dx+dy*dy;
}
let asq = alpha*alpha
vertices = vertices.filter(function(t) {
return dsq(t[0],t[1]) < asq && dsq(t[0],t[2]) < asq && dsq(t[1],t[2]) < asq;
})
let outline = Delaunay.from(vertices)
//let { points, triangles } = outline;
parent.append('path')
.attr('fill', '#FCE6D6')
.attr('opacity',0.5)
.attr('stroke', '#000000')
.attr('d', outline.render());
Changing the final line to:
.attr('d', outline.renderHull());
will give me the convex hull of the shape, but it's the concave hull I'm trying to create. I'm guessing that I filter the vertices before passing them to the outline constant via Delauny.from(vertices). I've tried that using the equations in the v3 example linked above, but that just removes all the vertices.