HTML öğesine sığdırmak için SVG foreignObject öğesinin boyutlandırılması

Question

D3 javascript kitaplığını kullanarak bir görselleştirme yapıyorum. Görselleştirmenin bazı öğeleri için araç ipuçları oluşturmak istiyorum ve müvekkilimin "kağıt parçacık/post-it" gibi görünmesini istiyor. Başlangıçta, istenen görünümü oluşturmak için bazı güzel CSS hileleri kullanarak araç ipuçları için düz DIV'ler oluşturdum. (this tutorial'den esinlenerek)

Araç ipuçlarını SVG foreignObject öğesinin içine yerleştirmek ve görselleştirmeye daha iyi uymasını sağlamak istiyorum ve bunları kolayca işleyebilirim. (ör. yakınlaştırma/kaydırma) Benim sorum şu: yabancıObject öğesinin içinde yer alan DIV'nin uygun boyutunun nasıl alınacağı, böylece foreignObject öğesinin boyutunu doğru olarak ayarlayabileceğim? Özellikle marjı/dolgu/gölge kullanırken ....

ben .getBoundingClientRect() kullanarak bunu anladım ama bu en iyi yolu olup olmadığını bilmiyorum. http://jsfiddle.net/jhe8Y/1/

DÜZENLEME:

fark ettim ki, farklı gölge kutusu ayarları için .getBoundingClientRect

İşte

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 + ')'); 
}; 

çalışan bir jsFiddle örnektir: Burada

bir kod-örnektir() çalışmayacak. Ayrıca ilk çözümümde .getBoundingClientRect()'un özellikle büyük boyutta çok büyük boyutta olduğunu fark ettim.

jQuerys .outerWidth (true) /. OuterHeight (true) öğesini kullanarak ve gölge boyutunu manuel olarak hesaplayarak başka bir yöntem denedim. Bu iyi çalışıyor gibi görünüyor, ama böyle bir şey yapmak için sadece korkunç hissettiriyor.

DIV'nin tam boyutunu tüm bileşenleriyle nasıl elde edebileceğiniz başka bir yol var mı? jsFiddle Güncelleme

buradadır: Bunu daha önce mücadele ettiğim ve yapmak kolay şey adildir Bootstrap's Tooltip güvenmek olduğunu tespit ettik http://jsfiddle.net/jhe8Y/3/

Answer 1

.

E.g.

// 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 
}); 

Size karşı tootltips eklemek istiyoruz ne olursa olsun svg elemanı için title ve data-content özellikler eklemek, aşağı kaynar. Ardından, içeriği istediğiniz gibi eşitleyin.

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

Bunu büyütmek gerekmez: Yani, senin durumunda, html

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

---

İlgili olurdu ve aşağı. Bunun gerçek bir kullanımı yok değil mi?Sonra hem foreignObjectheight ve width hem de 1 ve CSS foreignObject { overflow: visible; } ayarını yapabilirsiniz.