运行时的现有函数在使用D3.js更新数据时停止工作

Question

我的项目更新了地图上的图标。我有一个按钮列表，用于描述地图上放置的各种图标。当用户单击列表中的按钮时，相应的图标不透明度保持为1，其他图标不透明度变为零;所以现在观众只能看到与所选描述一起出现的单个图标。这个概念在初始运行时非常有用。我遇到的问题是当我更新数据时，按钮列表功能不再有效。该功能失去了图标的焦点。

我更新数据的原因是突出显示颜色区域。我有一个绿色区域（绿色图标）和一个黑色区域（黑色图标）。更新这两个区域之间的数据切换。我仍然需要按钮列表来隔离图标及其相应的描述。我有这个功能的原因，我有一些图标层叠在其他人之上。我需要删除阻止图标，以便用户将鼠标悬停在特定图标上以查看其他信息。我正在使用d3.js和使用JavaScript的自定义函数构建此项目。我感谢任何人可以提供/建议的任何帮助，或者我会采用完全不同的方法。

我的代码：

var svg = d3.select("#mapData").append("svg")
.attr("preserveAspectRatio", "xMidYMid")
.attr("viewBox", "0 0 1000 650")
.attr("width", "100%")
.attr("height", "100%")
features = svg.append("g")
.attr("class","features");


var select = d3.select('#form1')
  .append('select')
var options = select.selectAll('option')
  .data(data)
  .enter().append('option')
  .attr('class', function(d) {
    return 'option option' + d.id;
  })
  .attr('id', function(d) {
    return 'tankValue' + d.id;
  })
  .html(function(d) {
    return d.discrip;
  })
  .attr('class', function(d) {
    return ' tankItem tankItem' + d.id;
  })
  .attr('value', function(d, i) {
    return i;
  });

var button = $(".tankItem");
var gallery = $('.mark');
for (var i = 0; i < button.length; i++) {
  (function(index) {
    button[index].onclick = function() {
      for (var i = 0; i < gallery.length; i++) {
        gallery[i].style.opacity = i === index ? 1 : 0;
      }
    }
  }(i));
}

function updateDay1() {
  d3.selectAll(".mark").remove();

  d3.csv("data/data.csv", function(error, data) {
    if (error) return alert("error");
    var marks = features.selectAll(".mark")
      .data(data)
      .enter()
      .append("image")
      .filter(function(d) {
        if (d.area == "black") {
          return d.graphic
        }
      })
      .attr('class', function(d) {
        return 'stagger mark mark' + d.id;
      })
      .attr('id', function(d, i) {
        return "feature-" + i;
      })
      .attr('width', 35)
      .attr('height', 10)
      .attr("xlink:href", function(d) {
        return d.graphic
      })
      .attr('x', function(d) {
        return projection([d.graphicLong, d.graphicLat])[0]
      })
      .attr('y', function(d) {
        return projection([d.graphicLong, d.graphicLat])[1]
      })
      .attr("cursor", "pointer")
      .on("mousedown", function(d) {
        div.transition()
          .duration(200)
          .style("opacity", .9);
        div.html("<div class='tipClose'><img src='graphic/closeBtn.svg' alt='Close Icon'></div><strong>Equipment Type:</strong> <br><span style    ='color:red'>" + d.discrip + "</span></br><a class='fancybox-thumb fancybox-button iframe fancybox' 	rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='" + d.clusterGrp + "'   title='" + d.imageTitle + " '  href='graphic/" + d.popup + "' ><img src='graphic/" + d.popupThumb + "' alt='Image'></a>")
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 300) + "px");
      })
      .attr("text-anchor", "middle")
      .append("features:title")
      .text(function(d) {
        return d.id;
      })
  });
}

Answer 1

问题是，您将事件处理程序附加到页面上的项目：

var button = $(".tankItem");
var gallery = $('.mark');
for (var i = 0; i < button.length; i++) {
  (function(index) {
    button[index].onclick = function() {
      for (var i = 0; i < gallery.length; i++) {
        gallery[i].style.opacity = i === index ? 1 : 0;
      }
    }
  }(i));
}

//那么你在这里删除那些项目，从而删除事件处理程序：

function updateDay1() {
  d3.selectAll(".mark").remove();

重新执行该事件处理程序附件（可能在函数中）或将处理程序附加到这些元素的容器中。

请注意此表单附加到容器：

$(mycontainerselector).on('click','.tankItem', function(){

这也许可行：

$(mycontainerselector).on('click','.tankItem', function(e){
    var index = $(e.target).index();
    var gallery = $('.mark');
    for (var i = 0; i < gallery.length; i++) {
        gallery[i].style.opacity = i === index ? 1 : 0;
    }
});