Question

我知道它应该像选择你需要的元素并应用调用一样简单，但就我而言，当我这样做时，什么也没发生。

就我而言，我需要根据地图的缩放级别重新绘制圆圈。

如果缩放级别是＆lt;一定数量，使用圆圈的数据集A. 如果缩放级别>数字使用数据集B绘制圆圈。

我可以很好地绘制圆圈，并且在更改缩放级别时会更改，但是当我向这些添加.on("click")事件时，没有任何反应。

以下是Codepen链接，显示缺少点击事件的工作CODEPEN LINK

以下是我正在使用的代码，我感觉我在update()函数中做错了，以及我使用.remove()函数的方式：

L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlbmluamEiLCJhIjoiSjg5eTMtcyJ9.g_O2emQF6X9RV69ibEsaIw';
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([53.4072, -2.9821], 14);

var data = {
  "largeRadius": [{
    "coords": [53.3942, -2.9785],
    "name": "Jamaica Street"
  }, {
    "coords": [53.4073, -2.9824],
    "name": "Hood Street"
  }],
  "smallRadius": [{
    "coords": [53.4075, -2.9936],
    "name": "Chapel Street"
  }, {
    "coords": [53.4073, -2.9824],
    "name": "Hood Street"
  }]
};

// Sort data for leaflet LatLng conversion
data.largeRadius.forEach(function(d) {
  d.LatLng = new L.LatLng(d.coords[0], d.coords[1]);
});
data.smallRadius.forEach(function(d) {
  d.LatLng = new L.LatLng(d.coords[0], d.coords[1]);
});

var svg = d3.select(map.getPanes().overlayPane).append("svg");

var g = svg.append("g").attr("class", "leaflet-zoom-hide");

var circles = g.selectAll("circle")
  .data(data.smallRadius)
  .enter().append("circle");

function update() {
  circles.remove();
  translateSVG();

  var dataInstance;
  var radius;

  if (map.getZoom() < 17) {
    dataInstance = data.largeRadius;
    radius = 0.008;
  } else {
    dataInstance = data.smallRadius;
    radius = 0.001;
  }

  dataInstance.forEach(function(d) {
    d.LatLng = new L.LatLng(d.coords[0], d.coords[1]);
  });

  circles = g.selectAll("circle")
    .data(dataInstance)
    .enter().append("circle")
    .attr("id", function(d) {
      return d.name
    })
    .attr("cx", function(d) {
      return map.latLngToLayerPoint(d.LatLng).x
    })
    .attr("cy", function(d) {
      return map.latLngToLayerPoint(d.LatLng).y
    })
    .attr("r", function() {
      return radius * Math.pow(2, map.getZoom())
    });
}

function translateSVG() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  var regExp = /\(([^)]+)\)/;
  var translateString = regExp.exec(document.querySelector(".leaflet-map-pane").attributes[1].nodeValue);
  var translateX = parseInt(translateString[1].split(" ")[0]);
  var translateY = parseInt(translateString[1].split(" ")[1]);

  if (translateX < 0) {
    translateX = Math.abs(translateX);
  } else {
    translateX = -translateX;
  }
  if (translateY < 0) {
    translateY = Math.abs(translateY);
  } else {
    translateY = -translateY;
  }

  svg.attr("width", width);
  svg.attr("height", height);
  svg.attr("viewBox", function() {
    return translateX + " " + translateY + " " + width + " " + height;
  });
  svg.attr("style", function() {
    return "transform: translate3d(" + translateX + "px, " + translateY + "px, 0px);";
  });
}

// THIS IS THE CLICK EVENT THAT DOES NOT WORK
circles.on("click", function () {
  alert("clicked");
})

map.on("moveend", update);
update();

Answer 1

我不确定这是否完全解决了您的问题，主要是因为我不确定我是否完全理解您要实现的目标，但如果您移动“点击”代码：

circles.on("click", function () {
  alert("clicked");
});

在您的更新中，您将在完成销毁并重新创建后重新绑定，因此您的更新功能将变为：

function update() {
  circles.remove();
  translateSVG();

  var dataInstance;
  var radius;

  if (map.getZoom() < 17) {
    dataInstance = data.largeRadius;
    radius = 0.008;
  } else {
    dataInstance = data.smallRadius;
    radius = 0.001;
  }

  dataInstance.forEach(function(d) {
    d.LatLng = new L.LatLng(d.coords[0], d.coords[1]);
  });

  circles = g.selectAll("circle")
    .data(dataInstance)
    .enter().append("circle")
    .attr("id", function(d) {
      return d.name
    })
    .attr("cx", function(d) {
      return map.latLngToLayerPoint(d.LatLng).x
    })
    .attr("cy", function(d) {
      return map.latLngToLayerPoint(d.LatLng).y
    })
    .attr("r", function() {
      return radius * Math.pow(2, map.getZoom())
    });

    circles.on("click", function () {
      alert("clicked");
    });
}

然后从底部删除circles.on（“click”）部分。也许值得确保你每次都释放那个绑定，我不确定它是否会覆盖内存或者每次更新都会添加它。

这是你的一个分支，它似乎像我想象的那样工作：http://codepen.io/anon/pen/waqJqB?editors=101

d3圈.on（＆＃34;点击＆＃34;）事件未触发

1 个答案: