HTML 요소에 맞게 SVG foreignObject 요소 크기 조정

Question

D3 javascript 라이브러리를 사용하여 시각화를 만들고 있습니다. 시각화의 일부 요소에 대한 툴팁을 만들고 싶습니다. 그리고 고객이 '종이 조각/포스트'처럼 보이길 원합니다. 처음에는 멋진 CSS 트릭을 사용하여 툴팁에 대한 일반 DIV를 만들어 원하는 모양을 만들었습니다. (this tutorial에서 영감을 얻었습니다.)

SVG foreignObject 요소에 툴팁을 캡슐화하여 시각화에 더 잘 맞도록하고 싶습니다. 그래서 쉽게 조작 할 수 있습니다. (예 : 확대/축소/패닝) 그럼 내 질문은 : foreignObject 요소의 내부에있는 DIV의 적절한 크기를 얻는 방법입니다. 그래서 foreignObject 요소의 크기를 정확하게 설정할 수 있습니까? 특히 마진/패딩/섀도우를 사용할 때 ...

을 사용하여 알아 냈습니다 .getBoundingClientRect()하지만 이것이 최선의 방법인지는 잘 모르겠습니다. http://jsfiddle.net/jhe8Y/1/

편집 :

내가 실현, 서로 다른 그림자 상자 설정에 대한 .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의 예는 다음과 같습니다 여기

은 코드 예입니다()가 작동하지 않습니다. 나는 또한 내 첫 번째 해결책으로 .getBoundingClientRect()이 너무 큰 크기, 특히 올바른 크기를 반환한다는 것을 알게되었습니다.

그래서 jQuerys .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 속성을 추가로 요약된다. 그런 다음 원하는 내용으로 내용을 설정하십시오.

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

당신은 그것을 확장 할 필요가 없습니다 : 그래서, 당신의 경우, html는

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

---

관련 될 것이다 아래로. 진짜 사용법은 없습니다. 맞죠?그런 다음 foreignObjectheight 및 width에서 1까지와 CSS 세트 foreignObject { overflow: visible; }을 통해 모두 설정할 수 있습니다.