9

我正在使用 D3 javascript 库进行可视化。我想为可视化的某些元素创建工具提示，并且我的客户希望它们看起来像“纸片/便利贴”。最初，我使用一些不错的 CSS 技巧为工具提示创建了普通的 DIV，以创建所需的外观。（受本教程启发）

我想使用将工具提示封装到 SVG foreignObject 元素中，这样它就更适合可视化并且我可以轻松地操作它们。（例如缩放/平移）所以我的问题是：如何获得位于 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/

编辑：

我意识到，对于不同的阴影框设置，.getBoundingClientRect()将不起作用。我还意识到，在我的第一个解决方案中，.getBoundingClientRect()返回的尺寸太大，尤其是在正确的尺寸上。

所以我尝试了另一种方法，使用 jQuerys .outerWidth(true)/.outerHeight(true) 并手动计算阴影大小。这似乎工作正常，但做这样的事情感觉非常糟糕。

有没有其他方法可以获取 DIV 及其所有组件的确切大小？

更新的 jsFiddle 在这里：http: //jsfiddle.net/jhe8Y/3/

4

2 回答 2

2

你不需要放大和缩小它。它没有真正的用途，对吧？然后你可以同时设置andforeignObject height和通过 CSS set 。width1foreignObject { overflow: visible; }

于 2017-04-11T11:58:01.970 回答
0

我以前一直在为此苦苦挣扎，我发现最简单的方法就是依靠Bootstrap 的 Tooltip。

例如

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

它归结为，添加 title和data-content属性到您有兴趣添加工具提示的任何 svg 元素。然后，将内容设置为您想要的任何内容。所以，在你的情况下，html将是

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

有关的：

如何显示带有 SVG 对象的引导工具提示；堆栈溢出问题

引导工具提示

我关于它的超短博客文章

于 2014-05-26T20:17:27.847 回答