程式碼
// 建立 zoom 事件
const zoom = d3.zoom();
console.log(zoom);
// 將選取的DOM元素添加縮放方法
selectedDOM.call(zoom);
程式碼
const zoomed = (e) => {
// 抓出 transform 物件
const transform = e.transform;
console.log(transform);
};
const zoom = d3.zoom().on("zoom", zoomed);
// 呼叫 Zoom 事件
svg.call(zoom);
程式碼
const width = parseInt(d3.select(".zoomTranslateBy").style("width"));
const height = 300;
const svg = d3
.select(".zoomTranslateBy")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid gray");
// 加個圓點點
const circle = svg
.append("circle")
.attr("id", "dot")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 40)
.attr("fill", "#69b3a2");
const zoom = d3.zoom()
.on("zoom", (e)=> circle.attr("transform", e.transform))
// 呼叫 Zoom 事件
svg.call(zoom);
// 將svg網x座標移動-80px、y座標移動80px
zoom.translateBy(svg, -80, 80);
程式碼
const width = parseInt(d3.select(".translateTo").style("width"));
const height = 300;
const svg = d3
.select(".translateTo")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid gray");
// 加個圓點點
const circle = svg
.append("circle")
.attr("id", "dot")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 40)
.attr("fill", "#69b3a2");
const zoom = d3
.zoom()
.on("zoom", (e) => circle.attr("transform", e.transform));
// 呼叫 Zoom 事件
svg.call(zoom);
// 移動svg到以p點為主，x軸-10、y軸-10+6的地方
zoom.translateTo(svg, 10, 10, [0, 6]);
程式碼
const zoom = d3.zoom().extent([[0, 0], [250, 250]])
程式碼
selection.call(zoom).on("wheel.zoom", null);
程式碼
const width = parseInt(d3.select(".zoomBasic").style("width"));
const height = 300;
const svg = d3
.select(".zoomBasic")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid gray");
// 加個圓點點
const circle = svg
.append("circle")
.attr("id", "dot")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 40)
.attr("fill", "#69b3a2");
// 建立 Zoom 事件
const zoom = d3
.zoom()
.extent([
[0, 0],
[250, 250],
])
.scaleExtent([-5, 5])
.duration(600)
.on("zoom", (event) => {
// 這邊決定要放大誰
// 使用 event.transform 調整選定元素的transform
circle.attr("transform", event.transform);
});
// 呼叫 Zoom 事件
svg.call(zoom);
程式碼
const width = parseInt(d3.select(".zoomRadius").style("width"));
const height = 300;
const svg = d3
.select(".zoomRadius")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid gray");
// 加個圓點點
const circle = svg
.append("circle")
.attr("id", "dotRadius")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 40)
.attr("fill", "#69b3a2");
// 建立 Zoom 事件
const zoom = d3
.zoom()
.extent([
[0, 0],
[250, 250],
])
.scaleExtent([-5, 5])
.duration(600)
.on("zoom", (event) => {
const transform = event.transform;
// 設定縮放比例-調整圓形半徑
circle.attr("r", (d) => 40 * transform.k);
});
// 呼叫 Zoom 事件
svg.call(zoom);
程式碼
// html
<div class=" zoomAdjust"></div>
// js
const width = parseInt(d3.select(".zoomAdjust").style("width")),
height = 300;
const svg = d3
.select(".zoomAdjust")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid gray");
// 加個圓點點
const circle = svg
.append("circle")
.attr("id", "dot")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 40)
.attr("fill", "#69b3a2");
// 加上重設按鈕
const resetBtn = d3
.select(".zoomAdjust")
.append("button")
.attr("class", "btn btn-primary mt-2")
.attr("id", "reset")
.text("重設");
// 加上輸入縮放大小的 input
const div = d3
.select(".zoomAdjust")
.append("div")
.attr("class", "mt-3")
.append("span")
.text("輸入縮放倍數：");
const zoomScaleInput = div
.append("input")
.attr("id", "zoomscale");
const zoomScaleBtn = div
.append("button")
.attr("class", "btn btn-primary ms-2")
.text("執行縮放");
// 設定 Zoom 事件
const zoom = d3.zoom().on("zoom", (event) => {
circle.attr("transform", event.transform);
});
// 設定取 value 的值，套用 zoom 的倍數
zoomScaleBtn.on("click", () => {
const scaleValue = document.getElementById("zoomscale").value;
const transform = d3.zoomIdentity.scale(`${scaleValue}`);
svg.call(zoom.transform, transform);
});
// reset 事件
resetBtn.on("click", () => {
const transform = d3.zoomIdentity.scale(1);
svg.call(zoom.transform, transform);
});