凸包不适用于 zoom/pan

Question

我正在尝试包括@bumbeishvili 的 Convex Hull 实现（ https://bl.ocks.org/bumbeishvili/f027f1b6664d048e894d19e54feeed42) 到我的自定义 d3 力但不幸的是我无法在平移或缩放后更新凸包...有什么想法吗？

这里是fiddle:

https://jsfiddle.net/mbnuqrcy/

实施略有变化，因为一个节点可能是多个组的一部分，并且此信息不在节点中，而是在 link

function updateGroups(links, paths) {

subgraphs.forEach(function (subgraph) {
    var path = paths.filter(function (d) {
        return d == subgraph;
    }).attr('transform', 'scale(1) translate(0,0)')
        .attr('d', function (d) {
            polygon = polygonGenerator(subgraph, links);
            centroid = d3.polygonCentroid(polygon);

            // to scale the shape properly around its points:
            // move the 'g' element to the centroid point, translate
            // all the path around the center of the 'g' and then
            // we can scale the 'g' element properly
            return valueline(
                polygon.map(function (point) {
                    return [point[0] - centroid[0], point[1] - centroid[1]];
                })
            );
        });

    d3.select(path.node().parentNode).attr('transform', 'translate(' + centroid[0] + ',' + (centroid[1]) + ') scale(' + scaleFactor + ')');
});

}

提前致谢

Answer 1

您不需要为路径单独缩放。它很可能不适用于一张图中的 2 次缩放（一次捕获并处理鼠标事件）。

取消缩放到 paths [第 629 行]。

//paths.call(d3.zoom()
//    .scaleExtent([minZoom, maxZoom])
//    .on("zoom", zoomed));

然后将 paths 组放在您将缩放变换应用于 [第 404 行] 的组下方。（不低于svg）

groups = g.append('g').attr('class', 'groups');

凸包不适用于 zoom/pan

Convex hull not working with zoom/pan

d3.js

force-layout

convex-hull