无法在移动设备上点击我的D3地图上的链接

Question

我有美国的D3.js地图，并在地图上附加了链接（请参阅下面的代码）。但是，当我转到我的iPhone（Safari浏览器）时，我无法点击链接。有谁知道为什么这是或如何解决？正如你所看到的，我添加了Hammer.js，这应该有助于触摸屏功能。请参阅以下代码：

d3.json("https://unpkg.com/us-atlas@1/us/10m.json", function(error, us) {
  if (error) {
    console.log("(error on US map): " + error);
  }

  var width = 1000;
  var height = 600;

  var data = topojson.feature(us, us.objects.states).features;

  var svg = d3.select("#fishWildlifeMap").append('svg')
              .attr( "viewBox", "0 0 " + width + " " + height )
              .attr( "preserveAspectRatio", "xMinYMin meet" )
              .attr( "id", "svg-responsive" );

  var color = d3.scaleSequential(d3.interpolateBlues)
                .domain([0, 100]);

  var colorForCircles = d3.scaleSequential(d3.interpolateGreys)
                          .domain([100,0]);

  var path = d3.geoPath();

  var myElement = document.getElementById('fishWildlifeMap');
  var hammertime = new Hammer(myElement);

  d3.tsv('https://gist.githubusercontent.com/CandiW/bc27923f39589f621d48ee97eda267bb/raw/bab4e39f23bbd159149b0698d44d68276bf72825/usfishandwildlifeinfo.tsv',function(err,dataForStates){
      if(err){
          console.log("(error on state names): " + error);
      }
      var stateData = {};
      dataForStates.forEach(function(el,i){
          //key variable for 0 margins on tsv data
          var key = el.id.length > 1 ? el.id : '0' + el.id;
          stateData[key] = [el.name, el.url, el.code];
      });

  svg.append("g")
      .attr("class", "states")
    .selectAll("path")
    .data(data)
    .enter().append("path")
      .attr("d", path)
      .style('fill',function(d,i){ return color(i) });

  svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.feature(us, us.objects.states, function(a, b) { return a !== b; })));


  svg.append('g')
     .selectAll('circle')
     .data(data)
     .enter()
     .append('circle')
     .attr("cx", function(d){
      if(stateData[d.id][2] === "FL"){
        return path.centroid(d)[0] + 15;
      }
      else if(stateData[d.id][2] === "NJ" || stateData[d.id][2] === "RI" || stateData[d.id][2] === "DE"){
        return path.centroid(d)[0] + 25;
      }
      else if(stateData[d.id][2] === "MD" || stateData[d.id][2] === "MA"){
        return path.centroid(d)[0] + 45;
      }
      else if(stateData[d.id][2] === "LA" || stateData[d.id][2] === "HI" || stateData[d.id][2] === "RI"){
        return path.centroid(d)[0] - 10;
      }
      else {
        return path.centroid(d)[0];
      }
    })
    .attr("cy", function(d){
      if(stateData[d.id][2] === "HI"){
        return path.centroid(d)[1] + 20;
      }
      else if(stateData[d.id][2] === "MD" || stateData[d.id][2] === "RI"){
        return path.centroid(d)[1] + 25;
      }
      else {
        return  path.centroid(d)[1] + 5;
      }
    })
    .attr('r', 12)
    .style('fill', function(d,i){
      return colorForCircles(i * 10);
    })
    .style('opacity', '.3');

  svg.append("g")
      .selectAll("text")
      .data(data)
      .enter()
      .append("svg:text")
      .html(function(d){
        if(stateData[d.id][2] !== "DC"){

        hammertime.on('tap', function(ev) {
            return "<a target='_blank' href='" + stateData[d.id][1] + "'>"+ stateData[d.id][2] +"</a>";
        });

          return "<a target='_blank' href='" + stateData[d.id][1] + "'>"+ stateData[d.id][2] +"</a>";
        }
      })
      .attr("x", function(d){
        if(stateData[d.id][2] === "FL"){
          return path.centroid(d)[0] + 15;
        }
        else if(stateData[d.id][2] === "NJ" || stateData[d.id][2] === "RI" || stateData[d.id][2] === "DE"){
          return path.centroid(d)[0] + 25;
        }
        else if(stateData[d.id][2] === "MD" || stateData[d.id][2] === "MA"){
          return path.centroid(d)[0] + 45;
        }
        else if(stateData[d.id][2] === "LA" || stateData[d.id][2] === "HI" || stateData[d.id][2] === "RI"){
          return path.centroid(d)[0] - 10;
        }
        else {
          return path.centroid(d)[0];
        }
      })
      .attr("y", function(d){
        if(stateData[d.id][2] === "HI"){
          return path.centroid(d)[1] + 22;
        }
        else if(stateData[d.id][2] === "MD" || stateData[d.id][2] === "RI"){
          return path.centroid(d)[1] + 27;
        }
        else {
          return  path.centroid(d)[1] + 7;
        }
      })
      .attr("text-anchor","middle")
      .attr('font-size','12px')
      .attr('fill', function(d,i){
        if(stateData[d.id][2] === "HI" || stateData[d.id][2] === "NJ" || stateData[d.id][2] === "MD" || stateData[d.id][2] === "RI" || stateData[d.id][2] === "MA" || stateData[d.id][2] === "DE"){
          return "white";
        }
        else {
          return "black";
        }
      })

        });
});