javascript - 具有2个数据点的D3.js凸包

Hull Geom的API指出:“假定顶点数组的长度大于3。如果顶点的长度https://github.com/mbostock/d3/wiki/Hull-Geom)

我需要在2个节点周围绘制凸包。我使用的是力布局，因此凸包需要动态，因为如果单击某个节点并将其拖动，它会在节点周围移动。我的代码当前基于以下示例:http://bl.ocks.org/donaldh/2920551

对于上下文，这就是我要在其周围绘制凸包的内容:

它在有3个节点的情况下适用:

这是我要在其周围绘制凸包的内容(由于上面的示例中的代码不起作用，因为Hull Geom仅采用具有3个以上顶点的数组):

我了解到，凸包的传统用法永远不会只涉及两个点，但是我尝试在2个节点周围绘制椭圆，矩形等，但看起来不如3个节点好。

我了解到Hull Geom最终只会吐出一个用于路径的字符串，因此我可能可以为2个节点编写Hull Geom的修改版本。

非常感谢任何关于如何为2个节点编写经过修改的Hull Geom的建议或解决我的问题的任何常规建议。

最佳答案

基本上，您需要在距离生产线很近的地方至少有一个假点才能达到预期的效果。这可以通过groupPath函数来实现。

对于长度为2的d，您可以创建一个临时数组，并将其附加到map函数的结果中，如下所示:

var groupPath = function(d) {
    var fakePoints = [];
    if (d.values.length == 2)
    {
        //[dx, dy] is the direction vector of the line
        var dx = d.values[1].x - d.values[0].x;
        var dy = d.values[1].y - d.values[0].y;

        //scale it to something very small
        dx *= 0.00001; dy *= 0.00001;

        //orthogonal directions to a 2D vector [dx, dy] are [dy, -dx] and [-dy, dx]
        //take the midpoint [mx, my] of the line and translate it in both directions
        var mx = (d.values[0].x + d.values[1].x) * 0.5;
        var my = (d.values[0].y + d.values[1].y) * 0.5;
        fakePoints = [ [mx + dy, my - dx],
                [mx - dy, my + dx]];
        //the two additional points will be sufficient for the convex hull algorithm
    }

    //do not forget to append the fakePoints to the input data
    return "M" +
        d3.geom.hull(d.values.map(function(i) { return [i.x, i.y]; })
        .concat(fakePoints))
    .join("L")
    + "Z";
}

这是一个带有工作示例的fiddle。