質問

任意の文字列の幅と高さを正確に知りたい g 要素で SVG というのは、ユーザーがそれをクリックしたら、その周りに選択マーカーを描く必要があるからです。

ネットで見たのは以下のようなものです。 d3.select("myG").style("width") . 問題は、この要素には常に明示的な幅の属性が設定されるとは限らないということです。例えば、円を作るときに、その中に g の中に円を作ると、その円には半径( r )が設定されます。たとえ window.getComputedStyle メソッドを circle を呼び出すと、それは "auto" を返します。

任意の文字列の幅を計算する方法はありますか？ svg の要素の幅を計算する方法はありますか？ D3 ?

ありがとうございます。

どのように解決するのですか？

SVG要素の場合

のようなものを使って selection.node().getBBox() のようにすると、次のような値が得られます。

{
    height: 5, 
    width: 5, 
    y: 50, 
    x: 20
} 

HTML要素の場合

使用する selection.node().getBoundingClientRect()