Question

我有x和y坐标数组：

var coordinateX = [10,20,30,40,50,....];
var coordinateY = [10,20,30,40,50,....]:

那些坐标是圆心，当我将鼠标悬停在圆上时，我想在其中显示工具提示。

for (var i = 0; i < circles.length; i++) {
    circles[i].addEventListener('mousemove', show);
    circles[i].addEventListener('mouseout', hide);
}

工具提示表示为g元素，其中包含矩形和文本

<g id="poligon" visibility="hidden" class="element">
  <rect width="80" height="20" fill="white"/>
  <text class="tooltip" x="4" y="15" dominant-baseline="centered">Tooltip</text>
</g>

var poligon = svgDoc.getElementById("poligon")

function show(evt) {
  poligon.setAttributeNS(null, "transform","translate(" + coordinateX[i] + ", " + coordinatey[i] + ")");
  poligon.setAttributeNS(null, "visibility", "visible");
  textTooltipVrijednost.data = evt.target.getAttributeNS(null, "class");    
}

function hide(){
  poligon.setAttributeNS(null, "visibility", "hidden");
}

我尝试使用setAttribute转换g元素并更改了translate属性的x，y值，但是我只有最后一个位置值。如何为每个职位动态地做到这一点？

Answer 1

正如我评论的那样，一个更好的主意是使用html元素作为工具提示。这样，当svg元素的尺寸很小时，文本可能会变得很小而您无法阅读，则不会出现问题。

主要思想是检测鼠标在svg元素上的位置。如果鼠标输入一个圆圈，则工具提示将变为可见并占据鼠标的位置。同样在这种情况下，将显示圆的坐标。当鼠标离开圆圈时，工具提示的显示将返回到none。

我希望它会有所帮助。

const SVG_NS = 'http://www.w3.org/2000/svg';
let coordinates = [{cx:10,cy:7,r:5},{cx:10,cy:30,r:5},{cx:50,cy:10,r:5},{cx:33,cy:25,r:5}]

let circles = []

coordinates.forEach(c=>{
  circles.push(drawCircle(c, svg))
})

circles.forEach((c,i)=>{
  c.addEventListener("mouseenter",(e)=>{
    let m = oMousePos(svg, e);
    let cx = coordinates[i].cx;
    let cy = coordinates[i].cy;
    tooltip.style.display = "block"
    tooltip.style.left = m.x+"px";
    tooltip.style.top = m.y+"px";
    tooltip.innerHTML = `${cx}, ${cy}`
  })
  c.addEventListener("mouseleave",(e)=>{
    tooltip.style.display = "none"
  })
})




function drawCircle(o, parent) {

  var circle = document.createElementNS(SVG_NS, 'circle');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      circle.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(circle);
  return circle;
}



function oMousePos(svg, evt) {
      var ClientRect = svg.getBoundingClientRect();
                return { //objeto
                x: Math.round(evt.clientX - ClientRect.left),
                y: Math.round(evt.clientY - ClientRect.top)
      }
}

svg {
  border: 1px solid;
  width:100vh;
}
#wrap {
  position: relative;
}
#tooltip {
  position: absolute;
  width: 80px;
  height: 30px;
  background: white;
  border: 1px solid;
  text-align: center;
  line-height: 30px;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
}

<div id="wrap">
<svg id="svg" viewBox="0 0 60 40"></svg>

<div id="tooltip">0,0</div>
  
</div>

Answer 2

一种解决方案是将i传递到您的show()函数中。

for (let i = 0; i < circles.length; i++) {  // <-- change "var" to "let"
    circles[i].addEventListener('mousemove', function() { show(i) });
    circles[i].addEventListener('mouseout', hide);
}

function show(i) {
  poligon.setAttributeNS(null, "transform","translate(" + coordinateX[i] + ", " + coordinatey[i] + ")");
  poligon.setAttributeNS(null, "visibility", "visible");
  textTooltipVrijednost.data = evt.target.getAttributeNS(null, "class");    
}

var coordinateX = [10,20,30,40,50];
var coordinateY = [10,20,30,40,50];

var svgDoc = document.querySelector("svg");
var poligon = svgDoc.getElementById("poligon")

for (let i = 0; i < coordinateX.length; i++) {
  var circle = document.createElementNS(svgDoc.namespaceURI, "circle");
  circle.setAttribute("cx", coordinateX[i]);
  circle.setAttribute("cy", coordinateY[i]);
  circle.setAttribute("r", "5");
  svgDoc.appendChild(circle);

  circle.addEventListener('mousemove', function() { show(i); } );
  circle.addEventListener('mouseout', hide);
}



function show(i) {
  poligon.setAttribute("transform","translate(" + coordinateX[i] + ", " + coordinateY[i] + ")");
  poligon.setAttribute("visibility", "visible");
}

function hide(){
  poligon.setAttributeNS(null, "visibility", "hidden");
}

<svg width="400" height="400" viewBox="0 0 200 200">

  <g id="poligon" visibility="hidden" class="element">
    <rect width="80" height="20" fill="white"/>
    <text class="tooltip" x="4" y="15" dominant-baseline="centered">Tooltip</text>
  </g>

</svg>

在悬停时更改SVG <g />坐标

2 个答案: