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

Question

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

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

注意：右键单击 "open in new tab" 仍然有效。

这是一个fiddle：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) { ... });       

          ...
        };

Answer 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");

并且在添加新节点时，添加了一个 "on click" 处理程序

      ...
              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 并告诉浏览器在新的 tab/window.

中打开它

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

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

How to make SVG:A elements clickable when using D3.js Pan & Zoom behaviour?

javascript

css

jquery

svg

d3.js