D3. js зум + панорамирование странное поведение - PullRequest
Новая
       75

D3. js зум + панорамирование странное поведение

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

Попытка использовать масштабирование и панорамирование, как описано в https://coderwall.com/p/psogia/simplest-way-to-add-zoom-pan-on-d3-js. У меня есть следующий код: 

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

<head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
    <div class="tree">
        <svg class="tree__svg" width="900" height="900"></svg>
    </div>
    <script type="text/javascript">
        const data = {
            "name": "node #1",
            "children": [
                {
                    "name": "node #2",
                    "children": [
                        {
                            "name": "node #4",
                        },
                        {
                            "name": "node #5"
                        }
                    ]
                },
                {
                    "name": "node #3",
                    "children": [
                        {
                            "name": "node #6",
                        },
                        {
                            "name": "node #7"
                        }
                    ]
                }
            ]
        }

        const svg = d3.select(".tree__svg")
            .call(d3.zoom().on("zoom", () =>
                svg.attr("transform", d3.event.transform)));

        const hierarchy = d3.hierarchy(data);

        const tree = d3.tree().size([+svg.attr("width"), +svg.attr("height")])(hierarchy);

        svg.append("g")
            .selectAll("path")
            .data(tree.links())
            .join("path")
            .attr("fill", "none")
            .attr("stroke", "#000")
            .attr("d", d3.linkVertical()
                .x(d => d.x)
                .y(d => d.y));
    </script>
</body>

</html>

Когда я уменьшаю масштаб и пытаюсь панорамировать SVG, он быстро выходит за пределы области просмотра. Даже без предыдущего уменьшения масштаба панорама ведет себя странно (изображение выполняет небольшие скачки, когда оно панорамируется).

Я записал значения d3.event.transform, и похоже, что значения x и y подпрыгивают и вниз каким-то образом. На следующем снимке экрана показано, что произошло, когда я панорамировал по горизонтали, поэтому прыгают только значения x (но на самом деле странно, что значения y вообще не меняются). Я плавно двигал мышь, поэтому ожидал, что значения x (и, возможно, y) также будут плавно увеличиваться или уменьшаться. Есть идеи, что вызывает такое поведение?

enter image description here

...