konvertieren SVG-Koordinaten auf Seite Koordinaten in D3 js

Ich versuche, ein animiertes Werkzeugspitze zu zeigen, seine Position nach jeder 1 Sekunde ändern, für mehrere Graphen.konvertieren SVG-Koordinaten auf Seite Koordinaten in D3 js

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

Da dies ein div ist, wird translate mit diesem nicht funktionieren. Also, ich versuche auf diese Weise mit Svg-Koordinaten zu übersetzen.

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

Aber es dauert dies als Seitenkoordinatenwert.

Wie SVG-Koordinate auf Seite koordinieren konvertieren? Oder gibt es eine andere Möglichkeit, Tool-Tip als SVG-Element zu erstellen?

Quelle

2017-11-17 Shaila Zaman

Sie betrachten könnte die div Schreiben der Eingabe verwenden, zu aktualisieren, Ausgabemuster - Daten unter der Annahme, in jeder Sekunde kommt. –

Angenommen, Ihre div Tooltip ist absolut Position, Ihre "Seite" -Koordinate ist nur die Position des Elements svg plus die Position der Sache in der Svg-Element.

Hier ist ein kurzes Beispiel (die Maus über die Kreise):

<!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>

Quelle

2017-11-17 21:07:40 Mark

konvertieren SVG-Koordinaten auf Seite Koordinaten in D3 js

Antwort

Verwandte Themen