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

Question

<g>在可折叠树中展开节点后，我想获得主元素的宽度。

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

查看演示中的控制台输出（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);