javascript - d3.js 连续单击时删除两个具有匹配属性的元素

Question

我有两个具有相同 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 评估器 - 效果？

到目前为止:未捕获类型错误:a.target.className.indexOf 不是函数

Answer 1

这是带有评论的最终工作解决方案:

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 值的元素的情况下删除用于标识元素的类:删除类，更新 = 重新开始。