CODEWITHSUNDEEP
javascriptjqueryd3.js
Ed Die
Ed Die

Reputation: 227

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

I have two elements with identical href attributes. They are clicked, adding a class. If, in addition, the href of the element clicked first is equal to the href of the element clicked second, they will be filtered out.

  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
          }
  };

The task: 1. check if the elements clicked have matching href

How can I achieve the .prev() and .next() - jQuery assessors - effect in d3.js ?

so far: Uncaught TypeError: a.target.className.indexOf is not a function

Upvotes: 1

Views: 169

Answers (1)

Ed Die
Ed Die

Reputation: 227

Here is the final working solution with comments:

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();
};

The point is to remove the class that is used to identify the elements in the case when two elements with different href values are clicked consecutively: remove class, update = start fresh.

Upvotes: 1

Related Questions