Question

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

一旦我添加了缩放行为，click事件就不再进入“svg：a”元素。我该如何解决这个问题？

注意：右键单击“在新标签中打开”仍然有效。

以下是正在运行的版本：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”元素中拉出网址并告诉浏览器在新的标签/窗口中打开它。

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

如何制作SVG：使用D3.js时可点击的元素Pan＆amp;缩放行为？

1 个答案: