javascript - 创建一个多边形计算形状javascript d3

Question

我在类似于此的图表上绘制了一系列点：

我想在它们周围创建一个边界多边形，如下所示：

我在 http://bl.ocks.org/gka/1552725找到了关于如何执行此操作的很好的解释， 从 Delaunay 三角剖分计算 alpha 形状的边界多边形，但这是使用 d3 的版本 3，我正在使用版本4. 我已经设法使用 v4 实现了一些示例，但不知道如何过滤三角形到目前为止，我已经做到了：

我将不胜感激任何帮助。我的代码如下所示：

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());

将最后一行更改为：

.attr('d', outline.renderHull());

会给我形状的凸包，但这是我要创建的凹包。我猜我在通过 Delauny.from(vertices) 将它们传递给轮廓常量之前过滤了顶点。我已经尝试使用上面链接的 v3 示例中的方程式，但这只是删除了所有顶点。

标签： javascriptd3.jscharts