Sie können Text mit Zoom auswählen?

Ich habe eine Svg, die Elemente mit Text in ihnen hat. Ich möchte in der Lage, diesen Text zu markieren, die ich in der Lage bin zu tun, es sei denn, ich Zoomen hinzufügen:Sie können Text mit Zoom auswählen?

var zoom = d3.behavior.zoom().on("zoom", function() { 
       inner.attr("transform", "translate(" + d3.event.translate + ")" + 
              "scale(" + d3.event.scale + ")"); 
      }); 
     svg.call(zoom);

Was die notwendigen Javascript/HTML/CSS Änderungen Ich habe zu machen, um den Text zu haben wählbar?

Quelle

2016-10-16 db2791

@RobertLongson Ich bin nicht vertraut mit dem, was UAs ist, aber in Bezug auf Browser-Bugs, ich glaube, Das war eine Designwahl. Ich benutze Firefox, und mein Inspektor zeigt 'moz-user-select: none;' wenn ich mit dem Ziehen anfange. – db2791

Sie haben hier einen Event-Wettbewerb. Die Zoom/Pan-Ereignisse sind auf einer höheren Ebene und essen die Textauswahl im Text. Um die Dinge richtig gesetzt ist, stoppen die Ereignispropagierung, wenn Sie mit dem Textelement in Wechselwirkung treten:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<body> 
 
    <script src="//d3js.org/d3.v3.min.js"></script> 
 
    <script> 
 
    var width = 500, 
 
     height = 500; 
 

 
    var zoom = d3.behavior.zoom() 
 
     .scaleExtent([1, 10]) 
 
     .on("zoom", zoomed); 
 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height) 
 
     .call(zoom) 
 
     .append("g"); 
 

 
    svg.append("text") 
 
     .attr("x", 250) 
 
     .attr("y", 250) 
 
     .text("This is some text.") 
 
     .on("mousedown", function() { 
 
     d3.event.stopPropagation(); 
 
     }); 
 

 
    function zoomed() { 
 
     svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
 
    } 
 
    </script>

Quelle

2016-10-17 17:59:20 Mark

JA! Danke, es funktioniert einwandfrei! – db2791

Sie können Text mit Zoom auswählen?

Antwort

Verwandte Themen