D3.js SVGイメージのバウンディングボックスオフセット

Question

D3.jsを使用してsvgイメージでdivを埋めようとしています。これまでのところ、ブラウザウィンドウを大きくしたり小さくしたりすると、画像を中央に配置して、拡大して見ることができました。しかし、画像の境界ボックスを動的に見つけようとすると、キャンバスの左上のプロパティと、元の画像だけでなく、すべてのスペースの幅を見つけることができます。ここで

は私の問題の最大の基本的なモックです： http://jsfiddle.net/wnwfn/79/

d3.select("#svgEmbed").append("image") 
 
    .attr("xlink:href","http://www.clipartkid.com/images/32/square-clip-art-black-and-white-clipart-panda-free-clipart-images-UkJ6sF-clipart.png") 
 
    .attr("width", "100%") 
 
    .attr("height", "100%") 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.12/d3.min.js"></script> 
 
<p> 
 
    <svg id="svgEmbed" height="100%" width="100%" ></svg> 
 
</p>

だから私の質問は、私は、この例では正方形の画像の左上の位置を見つけることができる方法ですか？私は.offset（）、.getBBox（）を使って演奏しましたが、私が探している値を得ることができません。

Answer 1

あなたのアプローチはうまくいかないでしょう。画像の幅/高さを100%に設定すると、画像要素は常に[0,0]に配置されます。

var imgSize = 150; 
 
var img = d3.select("#svgEmbed") 
 
    .append("image") 
 
    .attr("xlink:href", "http://www.clipartkid.com/images/32/square-clip-art-black-and-white-clipart-panda-free-clipart-images-UkJ6sF-clipart.png") 
 
    .attr("x", "50%") 
 
    .attr("width", imgSize) 
 
    .attr("height", imgSize) 
 
    .attr("transform", "translate(" + (-imgSize/2) + ", 0)"); 
 

 
d3.select(window).on("resize", function(){ 
 
    console.log(img.node().getBBox()); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<p> 
 
    <svg id="svgEmbed" height="100%" width="100%"></svg> 
 
</p>

：あなたは画像を表示する方法のピクセルサイズがわかっている場合は、このような何かを行うことができます