d3.js v4缩放到图表中心（不是鼠标位置!!）

Question

d3缩放还有一个问题。

我尝试缩放到图形的中心（忽略鼠标位置）。但我找不到任何适合我的东西。

我试过了this，但是我觉得不行。

并没有在文档中找到任何内容。

缩放行为：

//zoom behavior
let zoom = d3.zoom()
  .scaleExtent([0.5, 5])
  .on("zoom", zoomed);

function zoomed() {
  .. some behavior ..
  //center here?
  .. some behavior ..
}

我认为这应该是一件容易的事情，并且不明白，为什么它没有在某处清楚地记录下来。

请参阅this fiddle了解整件事。

非常感谢帮助

Answer 1

我设法解决了我的问题。

有关详细信息，请参阅this fiddle。

请注意，这也会禁用x-panning。

这里有相关代码：

function getBoundingBoxCenterX (selection) {
  let element = selection.node();
  let bbox = element.getBBox();
  return bbox.x + bbox.width/2;
} 

//zoom behavior
let zoom = d3.zoom()
  .scaleExtent([1, 5])
  .on("zoom", zoomed);

function zoomed() {
  let center = getBoundingBoxCenterX(rect); //rect is the charts parent which expands while zooming
  let chartsWidth = (2 * center) * d3.event.transform.k;
  d3.event.transform.x = center - chartsWidth / 2;

  rescaling operations with d3.event.transform....
}