无法理解 d3js 缩放功能

Question

以下 SIMPLE :) 代码给出了以下错误。 请帮助我在圆圈上的onClick上缩放我犯了什么错误？

同样，如果有人可以提供一些想法，如果我想直接放大到第三圈而不单击它，我将非常感激； 我该怎么办？

ERROR: Uncaught TypeError: Cannot read property 'apply' of undefined
    at qr.call (d3.min.js:2)
    at SVGCircleElement.clicked (index.html:52)
    at SVGCircleElement.<anonymous> (d3.min.js:2)

这是代码。

    <!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>


        <script type="text/javascript">
            var width = 600, height = 350;
            var data = [
                { "r": 10, "cx": 100, "cy": 150 },
                { "r": 30, "cx": 200, "cy": 150 },
                { "r": 15, "cx": 300, "cy": 150 }

            ];
            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
                .call( 
                        d3.zoom()
                        .scaleExtent([1, 7])
                        .on("zoom", zoom)
                );

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

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


            function clicked(d,i,nodes) {
                console.log(nodes);

                svg.transition().duration(750).call(
                    zoom.transform,
                    d3.zoomIdentity.translate(width / 2, height / 2).scale(40).translate(-d.cx, -d.cy),
                    d3.mouse(svg.node())
                );

            }

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

        </script>

    </body>

    </html>

Answer 1

问题是zoom.transform不是一回事。 您已经创建了一个名为zoom的函数，如果这很重要，那么您需要创建另一个称为其他变量的变量，例如 zoomer，可能在窗口范围内，例如width和height ：

var zoomer = d3.zoom();

然后在您的点击处理程序zoom.transform zoomer.transform更改为zoomer.transform ：

function clicked(d,i,nodes) {
  console.log(nodes);

  svg.transition().duration(750).call(
    zoomer.transform, //change here
    d3.zoomIdentity.translate(width / 2, height / 2).scale(40).translate(-d.cx, -d.cy),
    d3.mouse(svg.node())
  );
}

如果您不需要zoom功能，然后删除并创建zoom变量，如zoomer上面一个不改单击处理程序。

无法理解 d3js 缩放功能

问题描述

1 个解决方案

解决方案1
0 2020-01-09 17:10:43

无法理解 d3js 缩放功能

问题描述

1 个解决方案

解决方案1 0 2020-01-09 17:10:43

解决方案1
0 2020-01-09 17:10:43