D3js 缩放和平移无法使用按钮（缩放和平移）佐...</desc> <question vote="1"> <p>我正在尝试使用 d3js 进行缩放和平移。我附上了下面的代码。我正在使用 d3js v6。目前缩放功能无法使用</p> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <title>Zoom + Pan</title> <script src="https://d3js.org/d3.v6.min.js"></script> <style> .overlay { fill: none; pointer-events: all; } button { padding: 10px 20px; } </style> <body> <div id="buttons"> <button class="zooming" id="zoom_in">+</button> <button class="zooming" id="zoom_out">-</butto/*n> <button class="panning" id="pan_right">→</button> <button class="panning" id="pan_left">←</button> <button class="panning" id="pan_top">↓</button> <button class="panning" id="pan_top">↑</button> </div> <script> var width = 960, height = 500; var randomX = d3.randomNormal(width / 2, 80), randomY = d3.randomNormal(height / 2, 80); var data = d3.range(2000).map(function() { return [randomX(), randomY() ]; }); var zoom = d3.zoom().scaleExtent([1, 8]).translateExtent([ [ -1000, -500 ], [ 1000, 500 ] ]).on("zoom", zoomed); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .call(zoom) .append("g"); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height); svg.selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5) .attr("transform", function(d) { return "translate(" + d + ")"; }); function zoomed() { svg.attr("transform", "translate(" + [d3.zoomTransform(this).x,d3.zoomTransform(this).y] + ")" + "scale(" + d3.zoomTransform(this).k + ")" ); } async function interpolateZoom (translate, scale) { var self = this; await d3.transition().duration(350).tween("zoom", function () { var iTranslate = d3.interpolate([d3.zoomTransform(this).x,d3.zoomTransform(this).y], translate), iScale = d3.interpolate( d3.zoomTransform(this).k, scale); return function (t) { d3.zoomIdentity .scale(scale) .translate(translate); zoomed(); }; }); } function zoomClick() { var clicked = d3.event.target, direction = 1, factor = 0.2, target_zoom = 1, center = [width / 2, height / 2], extent = zoom.scaleExtent(), translate = zoom.translate(), translate0 = [], l = [], view = {x: translate[0], y: translate[1], k: zoom.scale()}; d3.event.preventDefault(); direction = (this.id === 'zoom_in') ? 1 : -1; target_zoom = zoom.scale() * (1 + factor * direction); if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; } translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k]; view.k = target_zoom; l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y]; view.x += center[0] - l[0]; view.y += center[1] - l[1]; interpolateZoom([view.x, view.y], view.k); } d3.selectAll('button').on('click', zoomClick); </script> </code></pre> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <title>Zoom + Pan</title> <script src="https://d3js.org/d3.v6.min.js"></script> <style> .overlay { fill: none; pointer-events: all; } button { padding: 10px 20px; } </style> <body> <div id="buttons"> <button class="zooming" id="zoom_in">+</button> <button class="zooming" id="zoom_out">-</butto/*n> <button class="panning" id="pan_right">→</button> <button class="panning" id="pan_left">←</button> <button class="panning" id="pan_top">↓</button> <button class="panning" id="pan_top">↑</button> </div> <script> var width = 960, height = 500; var randomX = d3.randomNormal(width / 2, 80), randomY = d3.randomNormal(height / 2, 80); var data = d3.range(2000).map(function() { return [randomX(), randomY() ]; }); var zoom = d3.zoom().scaleExtent([1, 8]).translateExtent([ [ -1000, -500 ], [ 1000, 500 ] ]).on("zoom", zoomed); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .call(zoom) .append("g"); svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height); svg.selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5) .attr("transform", function(d) { return "translate(" + d + ")"; }); function zoomed() { svg.attr("transform", "translate(" + [d3.zoomTransform(this).x,d3.zoomTransform(this).y] + ")" + "scale(" + d3.zoomTransform(this).k + ")" ); } async function interpolateZoom (translate, scale) { var self = this; await d3.transition().duration(350).tween("zoom", function () { var iTranslate = d3.interpolate([d3.zoomTransform(this).x,d3.zoomTransform(this).y], translate), iScale = d3.interpolate( d3.zoomTransform(this).k, scale); return function (t) { d3.zoomIdentity .scale(scale) .translate(translate); zoomed(); }; }); } function zoomClick() { var clicked = d3.event.target, direction = 1, factor = 0.2, target_zoom = 1, center = [width / 2, height / 2], extent = zoom.scaleExtent(), translate = zoom.translate(), translate0 = [], l = [], view = {x: translate[0], y: translate[1], k: zoom.scale()}; d3.event.preventDefault(); direction = (this.id === 'zoom_in') ? 1 : -1; target_zoom = zoom.scale() * (1 + factor * direction); if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; } translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k]; view.k = target_zoom; l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y]; view.x += center[0] - l[0]; view.y += center[1] - l[1]; interpolateZoom([view.x, view.y], view.k); } d3.selectAll('button').on('click', zoomClick); </script></code></pre> </div> </div> <p></p> </question> <answer tick="false" vote="0"> <p>您正在使用<strong>D3 V6</strong>。 <pre><code>d3.event.target</code></pre> 一直支持到 <strong>V5</strong>。从 <strong>V6</strong> 开始，使用事件作为回调函数的第一个参数传递：</p> <pre><code>function zoomClick(event) { const clicked = event.target; ... } ... d3.selectAll('button').on('click', zoomClick); </code></pre> </answer> </body></html> - d3.js - SO中文参考