HTML要素に合わせたSVG foreignObject要素のサイズ変更

Question

私はD3 JavaScriptライブラリを使用して視覚化を行っています。ビジュアライゼーションの要素のいくつかのツールチップを作成したいと思っています。クライアントは、それらを「ペーパースニペット/ポスト」のようにしたいと考えています。最初は、素敵なCSSトリックを使ってツールチップのためのプレーンなDIVを作りました。 （触発されたthis tutorial）

SVG foreignObject要素にツールチップをカプセル化して、視覚化に適していて簡単に操作できるようにしたいと思います。 （zooming/panningなど）私の質問は、foreignObject要素の内部にあるDIVの適切なサイズを取得する方法です。つまり、foreignObject要素のサイズを正確に設定できますか？特にマージン/パディング/シャドーを使用する場合

.getBoundingClientRect（）を使用していますが、これが最善の方法かどうかはわかりません。ここ

は、コードの例である：ここ

var body = d3.select("body"); 

var svg = body.append("svg"); 

var tooltipContainer = svg.append("svg:g"); 

var html = tooltipContainer.append("foreignObject") 
var div = html.append("xhtml:div") 
    .attr('class', 'paper-tooltip') 
    .html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum  dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Donec eu enim quam. "); 

var bcr = div[0][0].getBoundingClientRect(); 

html.attr('x', 50) 
    .attr('y', 50) 
    .attr('width', bcr.width) 
    .attr('height', bcr.height); 

svg.call(d3.behavior.zoom().on('zoom', redrawOnZoom)); 

function redrawOnZoom(){ 
    tooltipContainer.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' +   d3.event.scale + ')'); 
}; 

が動作jsFiddle例である：http://jsfiddle.net/jhe8Y/1/

EDIT：

Iを実現、異なる陰影ボックス設定の.getBoundingClientRectその（）は機能しません。私はまた、私の最初の解決策では、.getBoundingClientRect（）が、特に適切なサイズで、大きすぎるサイズを返すことを認識しました。

私は、jQueryの.outerWidth（true）/。outerHeight（true）を使用し、手動でシャドーサイズを計算して別の方法を試みました。これはうまくいくようですが、そのようなことを行うのはひどく恐ろしいことです。

DIVのすべてのコンポーネントで正確なサイズを取得する方法はありますか？ jsFiddle更新

はここにある：私はこの前に苦戦してきたと私は一番簡単な方法はただでBootstrap's Tooltipに依存していることがわかってきましたhttp://jsfiddle.net/jhe8Y/3/

Answer 1

。

など。

// title: this is what gets shown as the title in the tooltip 
d3.select('svg').attr('title','This is my tooltip title'); 

// content: this will show up as the content if you go for 
// popovers instead . 
d3.select('svg').attr('data-content','This is some content'); 

// set the options – read more on the Bootstrap page linked to above 
$('svg').popover({ 
    'trigger':'hover' 
    ,'container': 'body' 
    ,'placement': 'top' 
    ,'white-space': 'nowrap' 
    ,'html':'true' // preserve html formatting 
}); 

それはあなたがtootltipsを追加することに興味を持っているものは何でもSVG要素にtitleとdata-content属性を追加することに帰着します。次に、内容を希望どおりに設定します。だから、あなたの場合には、htmlは関連

<div class='paper-tooltip'>Lorem ipsum dolor sit amet, ... etc etc.</div> 

---

次のようになります。

How do I show a bootstrap tooltip with an SVG object; Question on Stack Overflow

Bootstrap Tooltips

My super-short blog post on it

Answer 2

あなたはそれをスケールアップする必要はありません。とダウン。それを実際に使うことはありません。次に、foreignObjectheightとwidth〜1の両方を設定し、CSSセットforeignObject { overflow: visible; }で設定できます。