Как добавить всплывающую подсказку к графике SVG?

У меня есть серия SVG-прямоугольников (с использованием D3.js), и я хочу, чтобы при наведении мыши отображалось сообщение, сообщение должно быть окружено полем, которое выступает в качестве фона. Они оба должны быть идеально выровнены друг с другом и с прямоугольником (сверху и по центру). Каков наилучший способ сделать это?

Я попытался добавить svg-текст, используя «x», «y», «width»; и "высота" атрибуты, а затем добавив svg rect. Проблема в том, что контрольная точка для текста находится в середине (так как я хочу, чтобы он был выровнен по центру, я использовалtext-anchor: middle), но для прямоугольника это верхняя левая координата, плюс я хотел немного отступить вокруг текста, что делает его немного болезненным.

Другой вариант заключался в использовании html div, что было бы неплохо, потому что я могу добавить текст и отступ напрямую, но я не знаю, как получить абсолютные координаты для каждого прямоугольника. Есть ли способ сделать это?

 Phrogz17 мая 2012 г., 23:06
Это проблема с использованием разметки, для которой она была разработана?
 nachocab17 мая 2012 г., 23:10
Просто это выглядит не очень хорошо, но я ценю ваш ответ
 nachocab17 мая 2012 г., 23:03
Если нет другого пути, я думаю,

Ответы на вопрос(4)

Решение Вопроса

Вы можете использовать элемент title, как указано в Phrogz. Есть также несколько хороших подсказок, таких как JQuery's Tipsy.http://onehackoranother.com/projects/jquery/tipsy/ (который может использоваться для замены всех элементов заголовка), nvd3 Боба Монтеверде или даже всплывающая подсказка Twitter из их Bootstraphttp://twitter.github.com/bootstrap/

Единственным хорошим способом, который я нашел, было использование Javascript для перемещения всплывающей подсказки.<div> вокруг. Очевидно, что это работает, только если у вас есть SVG внутри документа HTML - не автономно. И это требует Javascript.

function showTooltip(evt, text) {
  let tooltip = document.getElementById("tooltip");
  tooltip.innerHTML = text;
  tooltip.style.display = "block";
  tooltip.style.left = evt.pageX + 10 + 'px';
  tooltip.style.top = evt.pageY + 10 + 'px';
}

function hideTooltip() {
  var tooltip = document.getElementById("tooltip");
  tooltip.style.display = "none";
}
#tooltip {
  background: cornsilk;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px;
}
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>

<svg>
  <rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
  </rect>
</svg>

Вы можете использовать простоSVG<title> element а браузер по умолчанию рендеринг это передает? (Примечание: этоnot так же, какtitle атрибут, который вы можете использовать в div / img / spans в html, он должен быть дочернимelement названныйtitle)

rect {
  width: 100%;
  height: 100%;
  fill: #69c;
  stroke: #069;
  stroke-width: 5px;
  opacity: 0.5
}
<p>Mouseover the rect to see the tooltip on supporting browsers.</p>

<svg xmlns="http://www.w3.org/2000/svg">
  <rect>
    <title>Hello, World!</title>
  </rect>
</svg>

В качестве альтернативы, если вы действительно хотите показывать HTML в SVG, вы можете встроить HTML напрямую:

rect {
  width: 100%;
  height: 100%;
  fill: #69c;
  stroke: #069;
  stroke-width: 5px;
  opacity: 0.5
}

foreignObject {
  width: 100%;
}

svg div {
  text-align: center;
  line-height: 150px;
}
<svg xmlns="http://www.w3.org/2000/svg">
  <rect/>
  <foreignObject>
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        Hello, <b>World</b>!
      </div>
    </body>      
  </foreignObject>
</svg>

& # x2026; но тогда вам понадобится JS для включения и выключения дисплея. Как показано выше, один из способов сделать ярлык в нужном месте - это обернуть прямоугольник и HTML в одно и то же.<g> что помещает их обоих вместе.

Чтобы использовать JS, чтобы найти, где SVG-элемент находится на экране, вы можете использоватьgetBoundingClientRect()например,http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

 15 мар. 2019 г., 23:44
к несчастью<title> не влияет на мобильные устройства.
 25 мая 2017 г., 10:41
Хорошо работает для меня, чтобы вставить заголовок в элемент SVG!
 22 авг. 2017 г., 17:22
Хороший ответ. Но обратите внимание, чтоforeignObject is not supported in Internet Explorer
 18 дек. 2018 г., 00:03
На Firefox SVG имеет размер 0x0? Кажется, вы должны указать ширину и высоту, как<rect width="200" height="50"></rect>

Я всегда иду с общим названием CSS с моей настройкой. Я просто строю аналитику для своей страницы администратора блога. Мне не нужно ничего особенного. Вот некоторый код ...

let comps = g.selectAll('.myClass')
   .data(data)
   .enter()
   .append('rect')
   ...styling...
   ...transitions...
   ...whatever...

g.selectAll('.myClass')
   .append('svg:title')
   .text((d, i) => d.name + '-' + i);

И скриншот хрома ...

enter image description here

Ваш ответ на вопрос