2016-10-16 2 views
1

У меня есть svg, в котором есть элементы с текстом. Я хочу, чтобы иметь возможность выбрать этот текст, который я могу сделать, если я не добавить масштабированием:Возможность выбора текста с масштабированием?

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

Каковы необходимые изменения/HTML/CSS JavaScript, которые я должен сделать, чтобы иметь текст выбираемые?

+0

@RobertLongson Я не знаком с тем, что УАС, но с точки зрения браузера ошибок, я думаю, это был выбор дизайна. Я использую Firefox, и мой инспектор отображает «moz-user-select: none;», когда я начинаю перетаскивать. – db2791

ответ

2

У вас здесь какое-то соревнование по соревнованиям. События масштабирования/панорамирования находятся на более высоком уровне и есть текст в тексте. Для того, чтобы установить все правильно, остановить распространение события, когда вы взаимодействуете с текстом элемента:

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

+0

ДА! Спасибо, он работает безупречно! – db2791

Смежные вопросы