db2791 db2791 - 1 year ago 57
CSS Question

Being able to select text with zoom?

I have an svg that has elements with text in them. I want to be able to select this text, which I'm able to do, unless I add zooming:

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

What are the necessary Javascript/HTML/CSS changes I have to make in order to have the text selectable?

Answer Source

You have some event competition going on here. The zoom/pan events are at a higher level and are eating the text selection on the text. To set things right, stop the event propagation when you interact with the text element:

<!DOCTYPE html>
<meta charset="utf-8">
  <script src="//d3js.org/d3.v3.min.js"></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)

      .attr("x", 250)
      .attr("y", 250)
      .text("This is some text.")
      .on("mousedown", function() {

    function zoomed() {
      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");