[英]d3 v4 - zoom with buttons in conflicts with zoom behaviour
我已經用我的問題創造了一個要點 。
我從這個例子開始。
所以我的問題是除了鼠標控件之外我還需要一些放大和縮小按鈕。
使用zoom()行為實現鼠標控件(通過拖動縮放輪和平移) 。 它工作得很好。
然后我添加了兩個用於放大和縮小的按鈕:
var _zoom = d3.zoom()
.scaleExtent([1 / 2, 8])
.on("zoom", zoomed);
var gui = d3.select("#gui")
gui.append("span")
.classed("zoom in", true)
.text("+")
.on("click", function() { _zoom.scaleBy(container, 2); })
gui.append("span")
.classed("zoom out", true)
.text("-")
.on("click", function(){ _zoom.scaleBy(container, 0.5); })
它們與鼠標行為發生沖突。 要重現您必須縮放和拖動的錯誤(使用鼠標控件),然后單擊+
span:當前轉換將被覆蓋。
怎么解決?
要記住的關鍵是縮放變換存儲在node
,而不是 _zoom
對象中。
在您的情況下,您在svg
節點上設置鼠標偵聽器,
svg.call(_zoom);
當在svg
元素上觸發縮放事件時,您可以獲取svg
節點的更新縮放變換並將其應用於g
節點,
g.attr("transform", d3.event.transform);
在按鈕單擊時更新g元素的縮放時,您需要做的就是獲取正確的變換,在您的情況下,獲取svg
節點的變換,
_zoom.scaleBy(svg, 0.5);
這將正確觸發svg
節點上的縮放事件,下面全部更新,
var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); svg.style("border", "solid 1px black"); var points = d3.range(2000).map(phyllotaxis(10)); var g = svg.append("g"); var _zoom = d3.zoom() .scaleExtent([1 / 2, 8]) .on("zoom", function() { g.attr("transform", d3.event.transform); }); svg.call(_zoom); var container = g.selectAll("circle") .data(points) .enter().append("circle") .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .attr("r", 2.5) function phyllotaxis(radius) { var theta = Math.PI * (3 - Math.sqrt(5)); return function(i) { var r = radius * Math.sqrt(i), a = theta * i; return { x: width / 2 + r * Math.cos(a), y: height / 2 + r * Math.sin(a) }; }; } var gui = d3.select("#gui"); gui.append("span") .classed("zoom in", true) .text("+") .on("click", function() { _zoom.scaleBy(svg, 2); }); gui.append("span") .classed("zoom out", true) .text("-") .on("click", function() { _zoom.scaleBy(svg, 0.5); })
<svg width="960" height="500"></svg> <div id="gui"></div> <script src="https://d3js.org/d3.v4.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.