更新后如何获取d3图表的宽度？

Question

我希望在展开可折叠树中的节点后获取主<g>元素的宽度。

正如所料，结构为#tree > svg > g > ...。它是我想要的第一个<g>的宽度。虽然我可以使用d3.select('#map>svg>g')（然后调用.getBBox().width来获取它，但我希望扩展点击分支之后的宽度为。d3.select('#map>svg>g')给出了扩展之前的宽度。（Demo）

查看演示中的控制台输出（console.log()在第156行），很明显单击会展开或折叠树，这当然会改变<g>的宽度，但是更新值仅显示在下一个点击事件上。

我是否过早检查宽度？我是否需要更新某些内容以实时提供“新”宽度？

Answer 1

问题在于您正在使用动画扩展节点的过渡。所以当你检查时，还没有发生任何事情。但是，您可以使用setTimeout来延迟检查，直到转换完成。

setTimeout(function() {
  var c = d3.select('#map>svg>g'),
      curWidth = c[0][0].getBBox().width;
  console.log(curWidth);
}, duration);