Unlisted
Edited
Nov 29, 2022
Insert cell
Changed in fork
-
# Simple Zoom & Pan - If curson on black square, it dosen't click and drag! How to fix that? - How to disable zoom function and keep only panning?
+
# Simple Pan (d3.zoom)
Insert cell
Changed in fork
-
viewof zoom = slider({ title: "Zoom", min: 0.1, max: 5,
+
viewof zoom = Inputs.range([0.1, 5], { label: "Zoom",
step: 0.1, value: 0.5 })
Insert cell
Changed in fork
chart = { const w = 800; const svg = d3 .create("svg") .attr("viewBox", [ ((1 / zoom) * -w) / 2, ((1 / zoom) * -w) / 2, (1 / zoom) * w, (1 / zoom) * w
-
]); const g = svg.append("g").attr("cursor", "grab");
+
]) .attr("cursor", "grab"); const g = svg.append("g");
g.append("path").attr( "d", d3.line().curve(d3.curveLinearClosed)([ [100, 0], [0, 100], [-100, 0], [0, -100] ]) ); g.append("path") .attr( "d", d3.line().curve(d3.curveLinearClosed)([ [400, 0], [0, 400], [-400, 0], [0, -400] ]) ) .style("fill", "none") .style("stroke", "black");
-
// zoom g.call( d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended) ); // zooming + pan; // function autoBox() { // document.body.appendChild(this); // const { x, y, width, height } = this.getBBox(); // document.body.removeChild(this); // return [x, y, width, height]; // }
svg.call( d3 .zoom() .extent([ [0, 0], [w, w] ])
-
.scaleExtent([1, 8])
+
.scaleExtent([1, 1])
.on("zoom", zoomed) );
-
function dragstarted() { d3.select(this).raise(); g.attr("cursor", "grabbing"); }
-
function dragged(event, d) { d3.select(this) .attr("cx", (d.x = event.x)) .attr("cy", (d.y = event.y)); } function dragended() { g.attr("cursor", "grab"); }
function zoomed({ transform }) { g.attr("transform", transform); }
-
// return svg.attr("viewBox", autoBox).node();
return svg.node(); }
Insert cell
Removed in fork
import { slider, select, color } from "@jashkenas/inputs"
Insert cell