D3.js删除两个元素匹配属性时，连续单击

d3.js to remove two elements with matching attribute when clicked consecutively

本文关键字：属性 单击 连续 元素 两个 删除 js D3      更新时间：2023-09-26

我有两个具有相同href属性的元素。单击它们，添加一个类。另外，如果第一次点击的元素的href等于第二次点击的元素的href，它们将被过滤掉。

  removeBubble = function(d) {
    var currentId;
    currentId = idValue(d);
   d3.select(this).classed("clicked",true);    // on click add class
   if (d3.selectAll(".clicked").length === 2 && // 2 elements class clicked
          d3.select(this).prev.attr("href") ===  // href of 1st elem
          d3.select(this).next.attr("href"))     // href of 2nd elem
          {
         // filter here
          }
  };

任务:1. 检查被点击的元素是否有匹配的href

如何在d3.js中实现。prev()和。next() - jQuery评估器的效果?

下面是带注释的最终工作解决方案:

removeBubble = function(d) {
  var currentId;
  currentId = idValue(d);
// when this clicked attach class
  var clicked = d3.select(this).classed("clicked",true);
 // ascribe href of elements with class clicked to variable
  var clicktext = d3.selectAll(".class1.clicked").attr("href");
  var clicklabel = d3.selectAll(".class2.clicked").attr("href");
// if no match remove class clicked and update
// else remove elements and update
   if ( clicklabel !== clicktext){
     console.log("it's not a match !");

     d3.selectAll(".clicked").classed("clicked",false);
     update();
     return d3.event.preventDefault();
 } else {  
    console.log("its a match !");

    data = data.filter(function(e) {
    return idValue(e) !== currentId;
    });
 }
 update();
 return d3.event.preventDefault();
};

关键是在连续单击两个具有不同href值的元素时，删除用于标识元素的类:remove class, update = start fresh

相关文章：