D3 单击事件通过缩放和平移图层停止

Question

尝试创建一个具有缩放和平移以及可选节点的示例。我面临的问题是，当负责缩放的矩形位于代表节点的圆圈上方时，该层会停止单击事件。当我将缩放图层移动到圆圈下方时，如下面的示例所示，当我在圆上时，缩放和平移功能将停止工作。我希望能够在 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; });