此问题涵盖的主题与已提出并回答的主题完全相同:
我还尝试实现此链接 http://bl.ocks.org/linssen/7352810 中的代码。
我在这里问的原因是因为解决方案是使用 D3.js 版本 3 给出的,但这些解决方案都不能解决我的问题。 这是我当前关于缩放的实现。
let translateVar = [0,0];
let scaleVar = 1;
function create_pan_zoomable_svg() {
let svg = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.style("background-color", "#eeeeee")
.call(_zoom).on("dblclick.zoom", null)
.append("g");
d3.select("#zoom_in").on('click', function() { _zoom.scaleBy(svg, 2)});
d3.select("#zoom_out").on('click', function() { _zoom.scaleBy(svg, 0.5)});
return svg;
}
var _zoom = d3.zoom()
.on("zoom", function() {
translateVar[0] = d3.event.transform.x;
translateVar[1] = d3.event.transform.y;
scaleVar = d3.event.transform.k;
svg.attr('transform', 'translate(' + translateVar[0] + ',' + translateVar[1] + ') scale(' + scaleVar + ')');
});
我找到了这篇文章d3.js V4 Button Zoom Implementation acting weird ,认为这可能会解决我的问题,但根据我的情况调整代码,结果发现基于滚轮鼠标的缩放不再起作用,而只是按钮。这是从该帖子改编的代码。
function create_pan_zoomable_svg() {
let zoom = d3.zoom().on("zoom", zoomed);
let svg = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.style("background-color", "#eeeeee")
.append("g").call(zoom).on("dblclick.zoom", null);
d3.select("#zoom_in").on("click", function() {
zoom.scaleBy(svg.transition().duration(750), 1.2);
});
d3.select("#zoom_out").on("click", function() {
zoom.scaleBy(svg.transition().duration(750), 0.8);
});
return svg;
}
function zoomed() {
svg.attr("transform", d3.event.transform);
}
另一个问题是,如果我在调用 zoom
之后添加 append("g")
,则两个基于的缩放都可以工作,但它们不会跟踪翻译。
请访问诊断问题:https://jsfiddle.net/vxhuzyp2/5/
任何帮助将不胜感激。
最佳答案
按照评论并阅读命名 var svg 和创建 svg
元素的困惑。
let zoom = d3.zoom().on("zoom", zoomed);
let svg = d3.select("svg")
.attr("width", "100%")
.attr("height", "100%")
.style("background-color", "#eeeeee")
.call(zoom)
.on("dblclick.zoom", null);
let g = svg.append("g");
//d3.selectAll("#zoom-section i").on("click", zoomClick);
g.append("circle").attr("r", 50).attr("fill", "red");
d3.select("#zoom_in").on("click", function() {
zoom.scaleBy(svg.transition().duration(750), 1.2);
});
d3.select("#zoom_out").on("click", function() {
zoom.scaleBy(svg.transition().duration(750), 0.8);
});
function zoomed() {
g.attr("transform", d3.event.transform);
}
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<button id="zoom_in">+</button>
<button id="zoom_out">-</button>
关于javascript - D3.js v4 - 如何添加具有默认滚轮鼠标缩放行为的缩放按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51897596/