Javascript 我想直接在d3js中缩放到一个圆，不需要单击或双击它，而是通过编程方式_Javascript_D3.js_Zooming_Selection

Javascript 我想直接在d3js中缩放到一个圆，不需要单击或双击它，而是通过编程方式

javascript d3.js

Javascript 我想直接在d3js中缩放到一个圆，不需要单击或双击它，而是通过编程方式,javascript,d3.js,zooming,selection,Javascript,D3.js,Zooming,Selection,多次尝试后，无法放大d3js。我有以下代码，可以正确地创建具有正确值和ID的SVG和HTML元素。 zoomTo3rdCircle怎么了？我希望当用户单击按钮缩放到第三个圆圈时，那个圆圈应该被缩放并移到svg的中心。但代码似乎没有做任何事情，甚至没有给出任何错误。我想是的，我遗漏了一些很小但很关键的东西 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta n

多次尝试后，无法放大d3js。我有以下代码，可以正确地创建具有正确值和ID的SVG和HTML元素。 zoomTo3rdCircle怎么了？我希望当用户单击按钮缩放到第三个圆圈时，那个圆圈应该被缩放并移到svg的中心。但代码似乎没有做任何事情，甚至没有给出任何错误。我想是的，我遗漏了一些很小但很关键的东西

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1" />
    <title>Zoom & Pan</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="d3.min.js"></script>

    <style type="text/css">

    </style>
</head>

<body>

    <svg width=700 height=700> </svg>

    <script type="text/javascript">

        var width = 700, height = 700;

        var data = [
            { "id": "firstcircle", "r": 10, "cx": 100, "cy": 150 },
            { "id": "secondcircle", "r": 30, "cx": 200, "cy": 150 },
            { "id": "thirdcircle", "r": 15, "cx": 300, "cy": 150 }

        ];
        var svg = d3.select("body").select("svg")
            .call(
                d3.zoom()
                    .scaleExtent([1, 3])
                    .on("zoom", zoom)
            );

        const g = svg.append("g");

        g.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("id", function (d) { return d.id; })
            .attr("fill", (d, i) => d3.interpolateRainbow(i / 3))
            .attr("r", function (d) { return d.r; })
            .attr("cx", function (d) { return d.cx; })
            .attr("cy", function (d) { return d.cy; });

        function zoom() {
            g.attr("transform", d3.event.transform);
        }

        var zoomer = d3.zoom();
        function zoomTo3rdCircle() {

            var thirdCircle = d3.select("#thirdcircle"); 
            thirdCircle.style("stroke", "blue");
            thirdCircle.style("fill", "yellow");

            x = thirdCircle.attr("cx");
            y = thirdCircle.attr("cy");

            g.transition().duration(1000).call(
                zoomer.transform,
                d3.zoomIdentity.translate(width / 2, height / 2).scale(2.5).translate(x, y)
            );


        }



    </script>

<button onclick="zoomTo3rdCircle()">Zoom To Third Circle </button>

</body>

</html>

改变

var zoomer=d3.zoom

到

至少做了一些移动和缩放开始起作用。但它引发了另一个问题，那就是当我用鼠标放大或缩小按钮时，整个“g”会回到它以前的位置，并从那里开始缩放。这很奇怪，让用户感到困惑

顺便说一句，我仍然不知道如何将焦距放大到第三圈；之后，当用户通过鼠标滚轮缩放时它从当前位置而不是上一个位置缩放

我想通过更新所取得的进展来回答我的问题

var zoomer = d3.zoom().on("zoom", function () {
            g.attr("transform", d3.event.transform);
        });