SVG 그래픽에 툴팁을 추가하는 방법은 무엇입니까?
일련의 svg 사각형 (D3.js 사용)이 있고 마우스 오버시 메시지를 표시하고 싶습니다. 메시지는 배경 역할을하는 상자로 둘러싸여 있어야합니다. 둘 다 서로와 직사각형 (상단 및 중앙)에 완벽하게 정렬되어야합니다. 이를 수행하는 가장 좋은 방법은 무엇입니까?
"x", "y", "width"및 "height"속성을 사용하여 svg 텍스트를 추가 한 다음 svg rect를 추가하려고했습니다. 문제는 텍스트의 참조 포인트가 중간에 있다는 것입니다 (내가 사용한 가운데 정렬되기를 원하기 때문에 text-anchor: middle), 직사각형의 경우 왼쪽 상단 좌표이고 텍스트 주위에 약간의 여백이 필요하다는 것입니다. 고통.
다른 옵션은 html div를 사용하는 것이 었는데, 텍스트와 패딩을 직접 추가 할 수 있지만 각 사각형의 절대 좌표를 얻는 방법을 모르기 때문에 좋을 것입니다. 이를 수행하는 방법이 있습니까?
Phrogz가 지정한대로 제목 요소를 사용할 수 있습니다. jQuery의 Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (모든 제목 요소를 대체하는 데 사용할 수 있음), Bob Monteverde의 nvd3 또는 심지어 Bootstrap http : // 의 Twitter 도구 설명과 같은 유용한 도구 설명도 있습니다 . twitter.github.com/bootstrap/
단순히 SVG <title>요소 와 그것이 전달하는 기본 브라우저 렌더링 을 사용할 수 있습니까 ? (참고 : 이것은 html의 div / img / spans에서 사용할 수 있는 속성 과 동일 하지 않으며 이라는 title하위 요소 여야합니다. 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>또는 실제로 SVG에 HTML을 표시하려면 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>… 그러나 디스플레이를 켜고 끄려면 JS가 필요합니다. 위에 표시된대로 레이블을 올바른 위치에 표시하는 한 가지 방법은 rect와 HTML을 <g>모두 함께 배치 하는 동일한 위치 에 래핑하는 것입니다.
JS를 사용하여 SVG 요소가 화면에있는 위치를 찾으려면을 사용할 수 있습니다 getBoundingClientRect(). 예 : http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
The only good way I found was to use Javascript to move a tooltip <div> around. Obviously this only works if you have SVG inside an HTML document - not standalone. And it requires 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>I always go with the generic css title with my setup. I'm just building analytics for my blog admin page. I don't need anything fancy. Here's some code...
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);
And a screenshot of chrome...
참고URL : https://stackoverflow.com/questions/10643426/how-to-add-a-tooltip-to-an-svg-graphic
'Nice programing' 카테고리의 다른 글
| 프로젝트 패널의 글꼴 크기를 변경할 수 있습니까? (0) | 2020.10.09 |
|---|---|
| PostgreSQL 9.1 이상에서 모듈을 가져 오거나 확장을 설치하려면 어떻게해야합니까? (0) | 2020.10.09 |
| 모든 영역이 동일한 레이아웃을 사용하도록 강제 (0) | 2020.10.09 |
| JSON 직렬화 가능하지 않음 (0) | 2020.10.09 |
| Postgres에서 최대 연결을 늘리는 방법은 무엇입니까? (0) | 2020.10.09 |