Координаты мыши D3 после преобразования - PullRequest
Новая
       23

Координаты мыши D3 после преобразования

0 голосов
/ 26 июня 2018

У меня есть вид топологии сети, который выглядит следующим образом. Он состоит из узлов и ссылок. У меня есть кнопка, которая создает линию под g.newLinks, одна координата которой задается для узла, а другая координата обновляется, чтобы быть координатами мыши при 'mousemove'. Это все работает правильно, пока я не выполню преобразование, а затем точка мыши и линии x2 и y2 больше не выстраиваются в линию. Как получить правильные координаты мыши после преобразования?

enter image description here

 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 - после перевода неверных координат мыши сообщается. Почему?

и это решение: D3 координаты щелчка после панорамирования и масштабирования

1 Ответ

0 голосов
/ 27 июня 2018

Координаты мыши относились ко всему 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;});
        }
    }
...