無法理解 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