具體代碼圖下所示：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div style="top:5px"><button id="reset">還原</button>
<button id="zoomIn">縮小</button>
<button id="zoomOut">放大</button>
<button id="translateX">向右平移</button>
<button id="translateY">向下平移</button>
</div>
<svg width="1000" height="700"></svg>
<script>
let svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
let g = svg.append("g");
g.append("text")
.attr("x", width/2)
.attr("y", height/2)
.text("測試按鈕放大、縮小Demo");
let zoom = d3.zoom()
.on("zoom", function(){ // zoom事件
console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);
console.log(`D3: : ${d3.event.transform}`);
g.attr("transform", d3.zoomTransform(svg.node()));
});
svg.call(zoom);
d3.select("#reset")
.on("click", function(d){
svg.call(zoom.transform, d3.zoomIdentity);
});
d3.select("#zoomIn")
.on("click", function(d) {
zoom.scaleBy(svg, 0.9); // 執行該方法後 會觸發zoom事件
let tran = d3.zoomTransform(svg.node());
// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手動地更新
console.log(tran);
});
d3.select("#zoomOut")
.on("click", function(d) {
zoom.scaleBy(svg, 1.1); // 執行該方法後 會觸發zoom事件
let tran = d3.zoomTransform(svg.node());
// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手動地更新
console.log(tran);
});
d3.select("#translateX")
.on("click", function(d) {
zoom.translateBy(svg, 10, 0);
let tran = d3.zoomTransform(svg.node());
// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
console.log(tran);
});
d3.select("#translateY")
.on("click", function(d) {
zoom.translateBy(svg, 0, 10);
let tran = d3.zoomTransform(svg.node());
// svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
console.log(tran);
});
</script>
</body>
</html>