d3の選択から生の要素を取得

Question

Power BIのカスタムビジュアルをTypeScriptで作成しています。私のクラスのコンストラクタでは、this.svg = d3.select(this.target).append("svg").attr("id", "svg");と書いています（this.targetは標準的なHTML要素を保持していますが、それは重要ではありません）。

私の質問は、this.svgを使用して、生のSVG要素だけを取得する方法はありますか？グーグルからは

私はconsole.log(this.svg.node())実行

は、その出力が正確に console.log(document.getElementById("svg"))と同じ表示されます...私は this.svg.node()を使用することができるはずと思われるが、それに行く微妙な何かがなければならない「真」の要素にこれは違いますChromeのデベロッパーウィンドウに表示されるので、問題ありません。

ただし、式this.svg.node().getBoundingClientRect()を使用すると、エラーProperty 'getBoundingClientRect' does not exist on type 'Node'のためにMy TypeScriptがコンパイルされませんが、document.getElementById("svg").getBoundingClientRect()は正しい値を返します。

this.svgが参照する実際の生のDOM要素を取得するにはどうすればよいですか？

私はd3 v3を使用しています。

Answer 1

.node()が本当の要素を返して、ここでの問題はtypescriptですコンパイラが、それは間違いなくgetBoundingClientRect()機能を持っています知ることができないので、他の状況で.node()、ちょうどElement Sよりも他のタイプのオブジェクトを返すことができるということです。

溶液タイプElementとしてオブジェクトをキャストすることである。

var svgElement = this.svg.node() as Element; 
var boundingRect = svgElement.getBoundingClientRect();