Javascript 使用矩形选择框选择SVG元素在缩放期间不工作:d3.js
我试图使用矩形选择框(使用)在mousemove上选择d3树中的节点。当svg处于正常比例时,它工作正常。如果我增加或减少比例值,它将无法按预期工作Javascript 使用矩形选择框选择SVG元素在缩放期间不工作:d3.js,javascript,jquery,d3.js,svg,Javascript,Jquery,D3.js,Svg,我试图使用矩形选择框(使用)在mousemove上选择d3树中的节点。当svg处于正常比例时,它工作正常。如果我增加或减少比例值,它将无法按预期工作 var translateCoords = d3.transform(d3.select("#svgGroup").attr("transform")); translateX = translateCoords.translate[0]; translateY = translateCoords.
var translateCoords = d3.transform(d3.select("#svgGroup").attr("transform"));
translateX = translateCoords.translate[0];
translateY = translateCoords.translate[1];
scaleX = translateCoords.scale[0];
scaleY = translateCoords.scale[1];
//where svgGroup is the main svg g element,
radius is radius of inner nodes
d3.selectAll( 'g.node-element >circle.inner').each( function( state_data, i) {
var tCoords = d3.transform(d3.select( this.parentNode).attr("transform"));
tX = tCoords.translate[0];
tY = tCoords.translate[1];
if(
!d3.select( this).classed( "selectedNode") &&
tX+translateX*scaleX -radius>=d.x && tX+translateX*scaleX -radius<=parseInt(d.x)+parseInt(d.width)&&
tY+translateY*scaleY-radius>=d.y && tY+translateY*scaleY+radius<=d.y+d.height
) {
d3.select( this.parentNode)
.classed( "selection", true)
.classed( "selectedNode", true);
}
});
var translateCoords=d3.transform(d3.select(“#svgGroup”).attr(“transform”);
translateX=translateCoords.translate[0];
translateY=translateCoords.translate[1];
scaleX=translateCoords.scale[0];
scaleY=translateCoords.scale[1];
//其中svgGroup是svg的主要元素,
半径是内部节点的半径
d3.选择全部('g.node-element>circle.inner')。每个(函数(状态数据,i){
var tCoords=d3.transform(d3.select(this.parentNode).attr(“transform”);
tX=tCoords.translate[0];
tY=t单词。翻译[1];
如果(
!d3.select(this).classed(“selectedNode”)&
tX+translateX*scaleX-radius>=d.x&&tX+translateX*scaleX-radius=d.y&&tY+translateY*scaleY+radius我建议您使用它来计算转换点和缩放点
因此,与其做这个繁重的计算来找到转换+缩放点
(坦白说,这很难理解!):
tX=tCoords.translate[0];
tY=t单词。翻译[1];
//console.log(tX+translateX+:“+d.x)
如果(!d3.select(this.classed)(“selectedNode”)&&
tX+translateX*scaleX>=d.x&&tX+translateX*scaleX=d.y&&tY+translateY*scaleY=d.x&&tX=d.y&&tY
tX = tCoords.translate[0];
tY = tCoords.translate[1];
// console.log(tX+translateX +":"+d.x)
if (!d3.select(this).classed("selectedNode") &&
tX + translateX * scaleX >= d.x && tX + translateX * scaleX <= parseInt(d.x) + parseInt(d.width) &&
tY + translateY * scaleY >= d.y && tY + translateY * scaleY <= d.y + d.height
)
var point = svg.node().createSVGPoint(); //create a point
var ctm = d3.select(this.parentNode).node().getScreenCTM(); //get screen ctm of the group
point.matrixTransform(ctm); //apply the transition + scale to the point
tX = point.matrixTransform(ctm).x; // the new translated+scaled point x
tY = point.matrixTransform(ctm).y; // the new translated+scaled point y
//now do your usual comparison to find selection
if (!d3.select(this).classed("selectedNode") &&
tX >= d.x && tX <= (parseInt(d.x) + parseInt(d.width)) &&
tY >= d.y && tY <= (parseInt(d.y) + parseInt(d.height))
) {