-
# 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.drag)

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");

+
  const g = svg.append("g")
    .datum({x: 0, y: 0})
    .attr("cursor", "grab");

  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])
      .on("zoom", zoomed)
  );

  function dragstarted() {
-
    d3.select(this).raise();
    g.attr("cursor", "grabbing");
+
    d3.select(this).attr("cursor", "grabbing");
  }

  function dragged(event, d) {
-
    d3.select(this)
      .attr("cx", (d.x = event.x))
      .attr("cy", (d.y = event.y));
+
    d3.select(this).attr("transform", `translate(${d.x = event.x}, ${d.y = event.y})`);
  }

  function dragended() {
-
    g.attr("cursor", "grab");
+
    d3.select(this).attr("cursor", "grab");
  }

-
  function zoomed({ transform }) {
    g.attr("transform", transform);
  }

  // return svg.attr("viewBox", autoBox).node();
  return svg.node();
}