使用 D3.js 平移和缩放行为时如何使 SVG:A 元素可点击？答案

【问题标题】：How to make SVG:A elements clickable when using D3.js Pan & Zoom behaviour?使用 D3.js 平移和缩放行为时如何使 SVG:A 元素可点击？
【发布时间】：2015-02-12 09:49:35
【问题描述】：

我有一个图表，其中包含设置了 xlink:href 值的“svg:a”元素。我需要缩放和平移图表，但我希望“svg:a”元素仍然可以点击。

一旦我添加了缩放行为，点击事件就不再到达“svg:a”元素。我该如何解决这个问题？

注意：右键单击“在新选项卡中打开”仍然有效。

这是一个小提琴：http://jsfiddle.net/0kwudfhc/5/

这里是运行版本：http://jsfiddle.net/0kwudfhc/5/embedded/result/

相关部分出处：

<style>
   ...
          .overlay {
            fill: none;
            pointer-events: all;
          }
   ...
</style>
   <script type="text/javascript">
      (function() {
        function render(data){

          var svg = d3.select("#diagram")
            .append("svg:svg")
              .attr("width", data.diagram.width)
              .attr("height", data.diagram.height)
              .append("g")
                .attr("transform", "translate(0,"+data.diagram.height+")")
                .append("g")
                  .call(d3.behavior.zoom().scaleExtent([0.5, 8]).on("zoom", zoom))
                  .on("dblclick.zoom", null)
                  .append("g");

          svg.append("rect")
            .attr("class", "overlay")
            .attr("x", 0)
            .attr("y", -data.diagram.height)
            .attr("width", data.diagram.width)
            .attr("height", data.diagram.height);

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

          ...

          var docs = svg.append("g").attr("id", "docs")
          .data([d3.values(data.documents).sort(function(a,b){return a.order - b.order;})])
          .selectAll(".node")
            .data(function(d){return d;})
            .enter()
              .append("svg:a")
                .attr("class", "node")
                .attr("target", "_top")
                .attr("xlink:href", function(d){return d.url;})
                .append("g")
                  .attr("id", function(d){ return "node_"+d.id;})
                  .attr('transform', function(d) { return "translate("+d.x+","+d.y+")" })
                  .on('mouseover', function(d) { ... })
                  .on('mouseout', function(d) { ... });       

          ...
        };

【问题讨论】：

你能提供一个fiddle吗？
已知错误：github.com/mbostock/d3/issues/1658
我不认为这个错误是相关的.. 但不管怎样，它自 2013 年以来就已经开放。我不希望这会改变。

标签： javascript jquery css svg d3.js

【解决方案1】：

我最后做的是..

关闭双击缩放。

 ...
 .append("g")
   .call(d3.behavior.zoom().scaleExtent([0.5, 8]).on("zoom", zoom))
   .on("dblclick.zoom", null) // <---- turn off double click zoom
   .append("g");

在添加新节点时，添加了“点击”处理程序

      ...
              var hrefs = svg.append("g").attr("id", "docs")
    .data([d3.values(data.documents)])
    .selectAll(".node")
      .data(function(d){return d;})
      .enter()
        .append("svg:a")
          .attr("class", "node")
          .attr("target", "_top")
          .attr("xlink:href", function(d){return d.url;})
          .on('click', clickit, true);  // <<<< added on click method

然后从“a”元素中提取 url 并告诉浏览器在新的标签/窗口中打开它。

    function clickit(){
      window.open(this.href.animVal);
    }

【讨论】：