D3/JS: обновление одного и того же стиля CSS несколько раз на одном элементе за одно перетаскивание

Question

Я использую функцию d3.drag() для линейного графика d3.

Эффект выглядит примерно так. Пользователь может перетащить прямоугольник через график, чтобы выделить часть линии.

Тем не менее, я хочу, чтобы перетаскивание вызывало всплывающий текст, когда прямоугольник перетаскивается на каждый промежуток между числами на оси x (каждый пробел заполнен скрытым (fill:none) прямоугольником).

При перетаскивании я в настоящее время перебираю все тазы и собираю значение x, которое они представляют. Затем я перебираю весь всплывающий текст с двумя точками данных (значение x, для которого должно появиться всплывающее окно ("начало"), и значение x, для которого всплывающее окно должно исчезнуть ("остановка")).

Я могу заставить всплывающие окна появляться (когда есть совпадение, я использую JS, чтобы изменить отображение на "блок"), но как только они появляются, я не могу заставить их исчезнуть (отображение: нет).

Можно ли не обновлять значения CSS дважды для одного элемента в одном и том же перетаскивании?

   //Following is in dragged() function in d3.drag()


  //Store all popup boxes
  triggerPoints = document.getElementsByClassName("boxes")
  allTriggers=[];

  //For each box, use id (ends in a year) to find corresponding data point
  counter=0
  for (t in triggerPoints){
     counter = counter+1
     if (t<triggerPoints.length){
        var currentId = triggerPoints[t].id
        var currentYear = currentId.substr(currentId.length - 4)

        //Find corresponding data point by looping through data
       for (seg in data){
          //construct the datapoint (name)
          var segmentChecker=(Number(seg)+1).toString()
          var currentSegmentId = "segment"+segmentChecker

           //Check if "start" is equal to "current year" (current box)
          if ((content[seg].start).toString()==currentYear){
              var checkThis = document.getElementById(currentSegmentId);
               //If match, update css <---Works
              //checkThis.style.setProperty("display", "block")
              checkThis.style.display="display";
              //checkThis.removeAttribute("display")

          }//end if


          //THIS DOES NOT RESULT AS EXPECTED <---NOT WORKING
           ///If any data point has a stop value = current year, make corresponding box disappear
          if ((content[seg].stop).toString()==currentYear){
              var checkThis = document.getElementById(currentSegmentId);
             //checkThis.style.setProperty("display", "block")
             checkThis.style.display="none";
             checkThis.removeAttribute("display")

         }//end if


       }//end for
     }//end if

    }//End for loop