在SVG图表上居中放置HTML div叠加层 [英] Centering an HTML div overlay on an SVG chart

问题描述

我有一个用D3绘制的SVG饼图，并且有一个小的HTML div，该div应该在将鼠标悬停在饼图的各个切片上时出现，如下所示:

http://jsfiddle.net/adamehirsch/bzSpW/

问题在于放置HTML重叠式广告.当前，我必须将其相对于整个页面进行显式定位.以下内容位于javascript的第145行附近:

d3.select("#bracketsTip")
    .style("left", "420px") // this is dumb
    .style("top", "320px")  // and unnecessary, I'm sure
.transition()
    .duration(250)
    .style("opacity", 1.0);

我正在寻找一种方法，使HTML div出现在饼图的中央，而不必自己指定像素偏移量.有建议吗?

解决方案

我注意到您在小提琴中加载了jQuery.您可以执行以下操作:

var leftPos = width / 2 - $("#bracketsTip").width() / 2
  , topPos = height / 2;

    d3.select("#bracketsTip")
        .style("left", leftPos + "px")
        .style("top", topPos + "px")
    .transition()
        .duration(250)
        .style("opacity", 1.0);

现在，如果您更改饼图的宽度和高度，则覆盖图将保持居中.

I've got an SVG pie chart that I've drawn with D3, and I've got a small HTML div that is supposed to appear when one mouses over the various slices of the pie chart, like so:

http://jsfiddle.net/adamehirsch/bzSpW/

The problem comes in positioning that HTML overlay. Currently, I'm having to explicitly position it relative to the entire page. The below comes in around line 145 of the javascript:

d3.select("#bracketsTip")
    .style("left", "420px") // this is dumb
    .style("top", "320px")  // and unnecessary, I'm sure
.transition()
    .duration(250)
    .style("opacity", 1.0);

I'm looking for a way to have the HTML div appear centered on the pie chart without having to specify the pixel offset myself. Suggestions?

解决方案

I noticed you had jQuery loaded in your fiddle. You could do something like:

var leftPos = width / 2 - $("#bracketsTip").width() / 2
  , topPos = height / 2;

    d3.select("#bracketsTip")
        .style("left", leftPos + "px")
        .style("top", topPos + "px")
    .transition()
        .duration(250)
        .style("opacity", 1.0);

Now if you change the width and height of your pie chart, the overlay will stay centered.

这篇关于在SVG图表上居中放置HTML div叠加层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！