d3里zoom縮放時力導向圖會偏移，怎么讓圖以鼠標光標為中心進行縮放？

在寫一個d3的力導向圖，用到zoom進行縮放，現(xiàn)在可以縮放，但是縮放時整個圖會偏移，要怎么禁止這種偏移？
我想要的效果是，縮放的時候是以鼠標光標為中心進行的。

// 縮放
function onZoomStart() {
  console.log('start zoom');
}
function zooming(d) {
  console.log('zoom ing', d3.event.transform.k, d3.event.type, d3.zoomTransform(this));
  d3.select(this).attr('transform', d3.zoomTransform(this));
}
function onZoomEnd() {
  console.log('zoom end');
}
const zoom = d3.zoom()
  .translateExtent([[0, 0], [WIDTH, HEIGHT]])
  .scaleExtent([1 / 10, 10]) // 設置最大縮放比例
  .on('start', onZoomStart)
  .on('zoom', zooming)
  .on('end', onZoomEnd);

// 定義svg和g，其他內(nèi)容放在g里面
const svg = d3.select('svg').append('svg')
  .attr('width', WIDTH)
  .attr('height', HEIGHT);
const g = svg.append('g').attr('class', 'force_g')
  .attr('width', WIDTH)
  .attr('height', HEIGHT)
  .call(zoom);