Question

我有一个svg，其中包含带文本的元素。我希望能够选择这个我能够做的文本，除非我添加缩放：

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

为了让文本可选，我必须做出哪些必要的Javascript / HTML / CSS更改？

Answer 1

你们正在进行一些比赛。缩放/平移事件处于较高级别并且正在吃文本上的文本选择。要正确设置，请在与文本元素交互时停止事件传播：

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

能够用缩放选择文字吗？

1 个答案: