d3 点击事件停止缩放和平移图层

Question

尝试创建一个具有缩放和平移以及可选节点的示例。我面临的问题是，当负责缩放的 rect 在代表节点的圆圈上方时，该层会停止单击事件。当我在圆圈下移动缩放层时，如下例所示，当我在圆圈上方时，缩放和平移功能停止工作。我希望能够在 svg 区域的任何地方进行缩放和平移，同时我希望能够通过单击它们的视觉表示来选择节点。

    d3.json("/miserables.json")
        .then((graph) => {
            var zoom = d3.zoom().on("zoom", zoomed).scaleExtent([1 / 10, 30]);
            var rect = svg.append( "rect" )
            var g = svg.append( "g" );

            var zz = graph.nodes.map( function ( n ) { return n.value } );
            var max = d3.max( zz );
            var scale = d3.scaleLinear().domain( [0, max] ).range( [5, 50] );

            var zz1 = graph.links.map( function ( n ) { return n.value } );
            var max1 = d3.max( zz1 );
            var scale1 = d3.scaleLinear().domain( [0, max1] ).range( [0, 50] );

            for ( var xx in graph.links )
            {
                xx.value = scale1( xx.value );
            }

            var link = g
                .attr("class", "links")
                .selectAll("line")
                .data(graph.links)

            var node = g
                .attr("class", "nodes")
                .selectAll("circle")
                .data(graph.nodes)
                .enter().append("circle")
                .attr( "r", function ( d ) { return scale( d.value ); } )
                .attr("cx", function (d, i) { return d.x })
                .attr("cy", function (d, i) { return d.y })
                .attr("fill", function(d) { return color(d.group); })
                .on("click", function(d){
                    self.emitter.fire(consts.EVENT_SHOW_NODE_INFO, self.component, {_id : d.id});
                });

            rect
                .attr( "width", width )
                .attr( "height", height )
                .style( "fill", "none" )
                .style( "pointer-events", "all" )
                .call(zoom)
                .call(zoom.transform, d3.zoomIdentity.translate(400, 200).scale(0.1));

            node.append("title")
                .text(function(d) { var arr = d.id.split(":"); let t = arr[arr.length-1]; return t; });

            simulation
                .nodes(graph.nodes)
                .on("tick", ticked);

            simulation.force("link")
                .links(graph.links);

            function zoomed()
            {
                if ( g ) {
                    g.attr( "transform", d3.event.transform );
                }
            }

            function ticked() {
                link
                    .attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

                node
                    .attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });
            }
        })
        .catch((err) => {
            console.log(err);
        });

Answer 1

终于想通了。我移动了可缩放图层上的圆圈。现在一切都像魔术一样工作。我只发布修改：

            var zoomable_layer = svg.append( "g" );

            // var zoom = d3.zoom().on("zoom", zoomed).scaleExtent([1 / 10, 30]);
            var zoom = d3.zoom()
                .scaleExtent([1 / 10, 30])
                .on("zoom", () => {
                    zoomable_layer.attr("transform", d3.event.transform )
                });

            var zz = graph.nodes.map( function ( n ) { return n.value } );
            var max = d3.max( zz );
            var scale = d3.scaleLinear().domain( [0, max] ).range( [5, 50] );

            var zz1 = graph.links.map( function ( n ) { return n.value } );
            var max1 = d3.max( zz1 );
            var scale1 = d3.scaleLinear().domain( [0, max1] ).range( [0, 50] );

            for ( var xx in graph.links )
            {
                xx.value = scale1( xx.value );
            }

            svg.call(zoom);
            svg.call(zoom.transform, d3.zoomIdentity.translate(width/2, height/2).scale(0.1));

            var link = zoomable_layer
                .attr("class", "links")
                .selectAll("line")
                .data(graph.links)

            var node = zoomable_layer
                .attr("class", "nodes")
                .selectAll("circle")
                .data(graph.nodes)
                .enter().append("circle")
                .attr( "r", function ( d ) { return scale( d.value ); } )
                .attr("cx", function (d, i) { return d.x })
                .attr("cy", function (d, i) { return d.y })
                .attr("cursor", "pointer")
                .attr("fill", function(d) { return color(d.group); })
                .on("click", function(d){
                    self.emitter.fire(consts.EVENT_SHOW_NODE_INFO, self.component, {_id : d.id});
                });

            svg.append("text")
                .attr("x", (200))
                .attr("y", height-20)
                .attr("text-anchor", "middle")
                .style("font-size", "16px")
                .style("font-style", "italic")
                .style('fill', 'orange')
                .text("Scroll to zoom in and out and explore the clusters of entities.");

            node.append("title")
                .text(function(d) { var arr = d.id.split(":"); let t = arr[arr.length-1]; return t; });