javascript - 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 平移。

这里是相关代码:

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....
}