D3.jsを使用して、SVGで作成した図をズーム・パンできるようにしたい

Question

https://wizardace.com/d3-zoom/

こちらのページを参考にして、htmlに記述したSVGで作成した図を、
モバイル端末のピンチ操作でズーム/パンしたいと思っているのですが、うまくいきません。

  var width = 800;
  var height = 600;

  var svg = d3.select("svg_box");

  var dataset = [];
  for(var i = 0; i < 300; i++) {
    var r = 0.5 * d3.min([height, width]) * Math.random();
    var t = 2 * Math.PI * Math.random();
    dataset.push({
      "x": width / 2 + r * Math.cos(t),
      "y": height / 2 + r * Math.sin(t)
    });
  }

  // 軸の設定
  var x = d3.scaleLinear().domain([0, width]).range([0, width]);
  var y = d3.scaleLinear().domain([0, height]).range([0, height]);

  var xAxis = d3.axisBottom(x)
    .ticks(width / height * 10) //
    .tickSize(height)
    .tickPadding(8 - height);

  var yAxis = d3.axisRight(y)
    .ticks(10)
    .tickSize(width)
    .tickPadding(8 - width);

  var gX = svg.append("g").call(xAxis);
  var gY = svg.append("g").call(yAxis);

  var zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([
      [-100, -100],
      [width + 90, height + 100]
    ])
    .on("zoom", zoomed);

  svg.call(zoom);

  function zoomed() {
    gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
    gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
  }

<div id="svg_box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" id="svg_item">
SVGの記述（省略）
</svg>
</div>

D3.js以外にも方法があればご教示いただけますと幸いです。

お知恵をお借りしたく思います。
よろしくお願いいたします。

Answer 1

D3.jsを使用せず、svg-pan-zoomを使用することで解決しました。
ありがとうございました。