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]
])
-
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();