我有一个如下所示的网络拓扑 View 。它由节点和链接组成。我有一个按钮在 g.newLinks 下创建一条线,其中一个坐标设置为节点,而另一个坐标更新为“mousemove”上的鼠标坐标。这一切都正常工作,直到我进行转换,然后鼠标点和线 x2 和 y2 不再对齐。如何在转换后获得正确的鼠标坐标?
addNewLineToNode(node: Node) {
this.drawingNewLine = true;
this.newLinkDatum = {
source: node,
target: { x: node.x, y: node.y }
};
this.svg.select('.newLinks').append('svg:line').attr('class', 'link');
}
function moveNewLine(d: any, event: MouseEvent) {
if (me.drawingNewLine) {
var mouse = d3.mouse(this);
if(isNaN(mouse[0])){
//Do nothing we've already set target x and y
} else {
var mCoords = me.getMouseCoords({x: mouse[0], y:mouse[1]});
me.newLinkDatum.target.x = mCoords.x;
me.newLinkDatum.target.y = mCoords.y;
}
const newLink = me.svg
.select('.newLinks')
.selectAll('.link')
.datum(me.newLinkDatum)
.attr('x1', function(d: any) {return d['source'].x;})
.attr('y1', function(d: any) {return d['source'].y;})
.attr('x2', function(d: any) {return d['target'].x;})
.attr('y2', function(d: any) {return d['target'].y;});
}
}
getMouseCoords(point: any){
var pt = this.svg.node().createSVGPoint();
pt.x = point.x;
pt.y = point.y;
pt = pt.matrixTransform(this.svg.node().getCTM());
return { x: pt.x, y: pt.y };
}
我已经尝试过使用这个解决方案(这就是我在上面展示的):d3.js - After translate wrong mouse coordinates being reported. Why?
最佳答案
鼠标坐标是相对于整个 svg 而不是具有转换的网络可缩放区域。 moveNewLine 函数需要如下所示:
function moveNewLine(d: any, event: MouseEvent) {
if (me.drawingNewLine) {
var mouse = d3.mouse(me.svg.select('#network-zoomable-area').node());
if(isNaN(mouse[0])){
//Do nothing we've already set target x and y
} else {
// var mCoords = me.getMouseCoords({x: mouse[0], y:mouse[1]});
me.newLinkDatum.target.x = mouse[0];
me.newLinkDatum.target.y = mouse[1];
}
const newLink = me.svg
.select('.newLinks')
.selectAll('.link')
.datum(me.newLinkDatum)
.attr('x1', function(d: any) {return d['source'].x;})
.attr('y1', function(d: any) {return d['source'].y;})
.attr('x2', function(d: any) {return d['target'].x;})
.attr('y2', function(d: any) {return d['target'].y;});
}
}
关于d3.js - 变换后的D3鼠标坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51050091/