Zoom / Pan должен работать из новой позиции вместо перехода назад в предыдущую позицию - PullRequest
Новая
       47

Zoom / Pan должен работать из новой позиции вместо перехода назад в предыдущую позицию

0 голосов
/ 15 января 2020

Я хочу перевести «g element» на основе нажатия кнопки вместо мыши / пальца. Я успешно переместил «элемент g» в правильную новую позицию с помощью «перевода», но когда я увеличиваю / перемещаю из НОВОЙ позиции, «элемент g» JUMPS возвращается в предыдущую позицию и увеличивает / перемещает из этой позиции , Пожалуйста, ознакомьтесь с кодом функции под названием BtnClicked ()

Есть ли способ / функция для установки положения увеличения / панорамирования на новое МЕСТОПОЛОЖЕНИЕ? В будущем я хочу увеличить / панорамировать таким образом, чтобы ЗЕЛЕНЫЙ ПРЯМОУГОЛЬНИК (элемент, по которому щелкнули), попадает в центр svg, когда на него щелкают, и когда я использую мышь для масштабирования / панорамирования, масштабирования / панорамирования из ЗЕЛЕНОГО ПЕРЕНОСА в центре свг.

Довольно долго искали в другом проекте, но, к сожалению, не удалось. 

 // ONLY g will be zooming and panning inside the svg
        // Quite good understanding of zoom. It would help.

        var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 500);

        var svgRect = d3.select("svg")
            .append("rect")
            .attr("id", "rectsvg")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", 500)
            .attr("height", 500)
            .attr("stroke", "black")
            .attr("stroke-width", 1)
            .attr("fill", 'rgba(0,0,0,0)');

        var g = d3.select("svg")
            .append("g");

        var r1 = d3.select("svg").select("g")
            .append("rect")
            .attr("id", "rec1")
            .attr("x", 150) // 150 means almost on the center of the svg
            .attr("y", 150) // as 500 is width and height and so upper left corner of this rect will be at 150,150
            .attr("width", 100)
            .attr("height", 100)
            .attr("stroke", "red")
            .attr("stroke-width", 1)
            .attr("fill", 'rgba(0,0,0,0)');

        var r2 = d3.select("svg").select("g")
            .append("rect")
            .attr("id", "rec2")
            .attr("x", 90) // 150 means almost on the center of the svg
            .attr("y", 50) // as 500 is width and height and so upper left corner of this rect will be at 150,150
            .attr("width", 50)
            .attr("height", 75)
            .attr("stroke", "blue")
            .attr("stroke-width", 1)
            .attr("fill", 'green');


        var zoomListener = d3.zoom()
            .scaleExtent([0.5, 3])  // NOTE: Zoom in will go 
            // maximum 1/2 of the original
            // and zoom out will go 
            // maximum 5 times. 
            .on("zoom", ZoomHandler);

        zoomListener(svg);

        function ZoomHandler() {

            // NOTE: Here if you change g with svg then
            // whole svg will be zoomed in and out
            // but IMHO it is better that svg and its rectange remain 
            // borderline rectange and things inside it i.e. g 
            // zoom in and zoom out. 
            g.attr("transform", d3.event.transform);

        }

        function BtnClicked() {
            g.attr("transform", "translate(70,190)");
            // above code translates g to (70,190) point correctly
            // but when i zoom/pan from this point, instead of zooming/panning from this point it JUMPS back to the previous position and stars zooming/panning from there. :-(


        }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Learning D3JS Zooming</title>
    <script type="text/javascript" src="d3.min.js"></script>

</head>

<body>
    <button type="submit" onclick="BtnClicked()">BUTTON</button>
</body>

</html>
...