创建一个ploygon counding形状javascript d3

时间:2018-11-26 10:40:49

标签: javascript d3.js charts

我在图表上绘制了一系列类似于以下内容的点: enter image description here

,我想在它们周围创建一个边界多边形,如下所示: enter image description here

我在以下位置找到了关于如何执行此操作的很好的解释 http://bl.ocks.org/gka/1552725 Calculate bounding polygon of alpha shape from the Delaunay triangulation,但这使用的是d3的第3版,而我使用的是第4版。我设法使用v4实现了一些示例,但无法弄清楚如何过滤三角形。到目前为止,我已经管理了此示例: enter image description here

我将不胜感激。我的代码如下:

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示例中的方程式,但这只是删除了所有顶点。

0 个答案:

没有答案