时间戳

首页 > 解决方案 > 我想直接在 d3js 中放大到一个圆圈，而不是单击或双击它，而是以编程方式

javascript - 我想直接在 d3js 中放大到一个圆圈，而不是单击或双击它，而是以编程方式

问题描述

经过多次尝试无法放大 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>

标签： javascriptd3.jszoomingselection

解决方案

改变

var zoomer = d3.zoom()

至

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

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

顺便说一句，我仍然不知道如何放大焦点到 3rd Circle；之后，当用户通过鼠标滚轮缩放时，它会从当前位置而不是先前位置缩放

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

推荐阅读