CODEWITHSUNDEEP
d3.jsforce-layoutconvex-hull
ddomingo
ddomingo

Reputation: 1023

Convex hull not working with zoom/pan

I am trying to include the Convex Hull implentation by @bumbeishvili ( https://bl.ocks.org/bumbeishvili/f027f1b6664d048e894d19e54feeed42) into my customize d3 force but unfortunately I cannot update the convex hulls after panning or zooming...Any thoughts?

Here the fiddle:

https://jsfiddle.net/mbnuqrcy/

The implementation changes a little bit because a node might be part of multiple groups and this information is not in the node but in the 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 + ')');
});

}

Thanks in advance

Upvotes: 4

Views: 160

Answers (1)

rioV8
rioV8

Reputation: 28703

You do not need to have a separate zoom for the paths. Most likely it will not work with 2 zooms in one graph (one catches and processes the mouse events).

Remove the zoom to the paths [line 629].

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

And then place the paths group below the group that you apply the zoom transform to [line 404]. (Not below the svg)

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

Upvotes: 3

Related Questions