SVG 좌표를 D3에서 페이지 좌표로 변환 js

애니메이션 도구 팁을 표시하려고하는데, 1 초마다 위치가 바뀌면서 여러 그래프가 표시됩니다.SVG 좌표를 D3에서 페이지 좌표로 변환 js

var tooltip = d3.select("body") 
     .append("div") 
     .attr("id", "tooltip") 
     .attr("class", "tooltip");

div이므로 번역이 작동하지 않습니다. 그래서 저는 svg 좌표로 이런 식으로 번역하려고합니다.

tooltip.html("Tooltip") 
      .style("left", x(currentTime) + "px") 
      .style("top", height + "px");

그러나 이것을 페이지 좌표 값으로 취합니다.

SVG 좌표를 페이지 좌표로 변환하는 방법은 무엇입니까? SVG 요소로 툴팁을 만드는 다른 방법이 있습니까?

출처

2017-11-17 Shaila Zaman

당신은 입력, 업데이트가 종료 패턴을 사용하여 DIV를 작성하는 것이 좋습니다 :

여기에 빠른 예 (원 이상 마우스)입니다. –

div 툴팁이 절대 위치라고 가정하면 "페이지"좌표는 svg 요소의 위치와 svg 요소의 위치를 더한 것입니다. 데이터를 가정 할 때마다 두 번째에 온다 -

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <svg 
 
     width="300" height="300" 
 
     style="left: 100px; top: 100px; position: absolute"> 
 
    </svg> 
 
    <div id="tooltip" style="position: absolute; border: 1px solid black"> 
 
     This is my tooltip 
 
    </div> 
 
    <script> 
 
     var json = [ 
 
     {x: Math.random() * 300, y: Math.random() * 300}, 
 
     {x: Math.random() * 300, y: Math.random() * 300}, 
 
     {x: Math.random() * 300, y: Math.random() * 300} 
 
     ]; 
 
     
 
     var svg = d3.select('svg'); 
 
     
 
     svg 
 
     .selectAll('circle') 
 
     .data(json) 
 
     .enter() 
 
     .append('circle') 
 
     .attr('cx', function(d){ return d.x }) 
 
     .attr('cy', function(d){ return d.y }) 
 
     .attr('r', 30) 
 
     .style('fill', 'red') 
 
     .on('mouseover', function(d){ 
 
      var svgPos = svg.node().getBoundingClientRect(); 
 
      d3.select('#tooltip') 
 
      .style('left', svgPos.left + d.x + 'px') 
 
      .style('top', svgPos.top + d.y + 'px'); 
 
     }) 
 
     
 
    </script> 
 
    
 
    </body> 
 

 
</html>

출처

2017-11-17 21:07:40 Mark

SVG 좌표를 D3에서 페이지 좌표로 변환 js

답변

관련 문제