Question

我正在尝试使用@bumbeishvili（ https://bl.ocks.org/bumbeishvili/f027f1b6664d048e894d19e54feeed42）加入我的自定义d3力，但是不幸的是，在平移或缩放后我无法更新凸包...有什么想法吗？

这里是小提琴：

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

凸包不适用于缩放/平移

1 个答案: