Центрирование наложения HTML div на диаграмме SVG

Question

Центрирование наложения HTML div на диаграмме SVG

У меня есть круговая диаграмма SVG, которую я нарисовал с помощью D3, и у меня есть небольшой html-div, который должен появиться, когда вы наведете курсор на различные фрагменты круговой диаграммы, например:

Http://jsfiddle.net/adamehirsch/bzSpW/

Проблема заключается в позиционировании этого HTML-наложения. В настоящее время мне приходится явно позиционировать его относительно всей страницы. Ниже приводится примерно строка 145 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);

Я ищу способ иметь HTML div появляются по центру круговой диаграммы без необходимости указывать смещение пикселя самостоятельно. Предложения?

989 1

Без рубрики

1 ответ:

Comments

Ничего не найдено.

woodedlawn · Accepted Answer · 2013-07-29 00:01:40

Я заметил, что у тебя в скрипке есть 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);
Теперь, если вы измените ширину и высоту круговой диаграммы, наложение останется центрированным.