d3.js - 凸包不适用于缩放/平移

Question

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

这里是 fiddle :

https://jsfiddle.net/mbnuqrcy/

实现略有变化，因为一个节点可能属于多个组，并且此信息不在节点中，而是在链接中

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